tooltip.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  2. // For licensing, see LICENSE.md or http://ckeditor.com/license
  3. /**
  4. * Enables the tooltip, which is the tooltip is in DOM but
  5. * not yet displayed.
  6. */
  7. @mixin ck-tooltip_enabled {
  8. .ck-tooltip {
  9. display: block;
  10. }
  11. }
  12. /**
  13. * Disables the tooltip making it disappear from DOM.
  14. */
  15. @mixin ck-tooltip_disabled {
  16. .ck-tooltip {
  17. display: none;
  18. }
  19. }
  20. /**
  21. * Shows the tooltip, which is already in DOM.
  22. * Requires `ck-tooltip_enabled` first.
  23. */
  24. @mixin ck-tooltip_visible {
  25. .ck-tooltip {
  26. visibility: visible;
  27. opacity: 1;
  28. }
  29. }
  30. .ck-tooltip,
  31. .ck-tooltip__text::after {
  32. position: absolute;
  33. // Without this, hovering the tooltip could keep it visible.
  34. pointer-events: none;
  35. // This is to get rid of flickering when transitioning opacity in Chrome.
  36. // It's weird but it works.
  37. -webkit-backface-visibility: hidden;
  38. }
  39. .ck-tooltip {
  40. // Tooltip is hidden by default.
  41. visibility: hidden;
  42. opacity: 0;
  43. display: none;
  44. z-index: ck-z( 'modal' );
  45. }
  46. .ck-tooltip__text {
  47. display: inline-block;
  48. }
  49. .ck-tooltip__text::after {
  50. content: "";
  51. width: 0;
  52. height: 0;
  53. }