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. :is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  8. .toolbar-tooltip {
  9. position: fixed;
  10. z-index: var(--admin-toolbar-z-index-tooltip);
  11. display: none;
  12. padding-inline: var(--admin-toolbar-space-12);
  13. padding-block: var(--admin-toolbar-space-8);
  14. color: var(--admin-toolbar-color-white);
  15. border: solid 1px transparent;
  16. border-radius: var(--admin-toolbar-space-8);
  17. background-color: var(--admin-toolbar-color-gray-990);
  18. font-size: var(--admin-toolbar-font-size-info-sm);
  19. font-variation-settings: "wght" 600;
  20. line-height: var(--admin-toolbar-line-height-info-sm);
  21. }
  22. [data-admin-toolbar="expanded"] & [data-drupal-tooltip]:hover + .toolbar-block__title-tooltip {
  23. display: none;
  24. }
  25. @media (--admin-toolbar-desktop) {
  26. [data-drupal-tooltip]:hover + .toolbar-tooltip,
  27. [data-drupal-tooltip]:focus + .toolbar-tooltip {
  28. display: block;
  29. }
  30. }
  31. }

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