// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. // For licensing, see LICENSE.md or http://ckeditor.com/license $ck-tooltip-arrow-size: 5px; .ck-tooltip { left: 50%; &__text { @include ck-rounded-corners(); font-size: .9em; line-height: 1.5; color: ck-color( 'tooltip-text' ); padding: ck-spacing( 'small' ) ck-spacing( 'medium' ); background: ck-color( 'tooltip-background' ); position: relative; left: -50%; &::after { border-style: solid; left: 50%; } } /** * A class once applied displays the tooltip south of the element. * * [element] * ^ * +-----------+ * | Tooltip | * +-----------+ */ &.ck-tooltip_s { bottom: - $ck-tooltip-arrow-size; transform: translateY( 100% ); .ck-tooltip__text::after { top: -$ck-tooltip-arrow-size; transform: translateX( -50% ); border-color: transparent transparent ck-color( 'tooltip-background' ) transparent; border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size; } } /** * A class once applied displays the tooltip north of the element. * * +-----------+ * | Tooltip | * +-----------+ * V * [element] */ &.ck-tooltip_n { top: -$ck-tooltip-arrow-size; transform: translateY( -100% ); .ck-tooltip__text::after { bottom: -$ck-tooltip-arrow-size; transform: translateX( -50% ); border-color: ck-color( 'tooltip-background' ) transparent transparent transparent; border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size; } } } .ck-tooltip, .ck-tooltip__text::after { // For the transition to work, the tooltip must be controlled // using visibility+opacity. A delay prevents a "tooltip avalanche" // i.e. when scanning the toolbar with mouse cursor. transition: opacity .2s ease-in-out .2s; }