tooltip.pcss.css

Same filename and directory in other branches
  1. 10 core/modules/navigation/css/components/tooltip.pcss.css

Tooltip styles.

File

core/modules/navigation/css/components/tooltip.pcss.css

View source
  1. /* cspell:ignore wght */
  2. /**
  3. * @file
  4. * Tooltip styles.
  5. */
  6. @import "../base/media-queries.pcss.css";
  7. .toolbar-tooltip {
  8. position: fixed;
  9. z-index: var(--admin-toolbar-z-index-tooltip);
  10. display: none;
  11. padding-inline: var(--admin-toolbar-space-12);
  12. padding-block: var(--admin-toolbar-space-8);
  13. color: var(--admin-toolbar-color-white);
  14. border-radius: var(--admin-toolbar-space-8);
  15. background-color: var(--admin-toolbar-color-gray-990);
  16. font-size: var(--admin-toolbar-font-size-info-sm);
  17. font-variation-settings: "wght" 600;
  18. line-height: var(--admin-toolbar-line-height-info-sm);
  19. }
  20. @media (--admin-toolbar-desktop) {
  21. [data-drupal-tooltip]:hover + .toolbar-tooltip,
  22. [data-drupal-tooltip]:focus + .toolbar-tooltip {
  23. display: block;
  24. }
  25. }
  26. [data-admin-toolbar="expanded"] [data-drupal-tooltip]:hover + .toolbar-block__title-tooltip {
  27. display: none;
  28. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.