Tooltips
The tooltip component shows a short description alongside a button. Use it for supplemental information and keep essential instructions visible on the page.
Base classes
Wrap the description and its button in .tooltip. Use .tooltip-description for the text and .tooltip-toggle on a button with an accessible name. Initialization gives the description the tooltip role and associates it with the button through aria-describedby.
By default, the tooltip opens when you hover over the button or Tab to it. Click the button or press Enter or Space to toggle it. Press Escape to close it.
Note
The preview limits the description width so it fits beside the button on narrow screens.
Initialization
Run the tooltip generator after the markup is in the DOM.
js
import generateTooltips from "@graupl/core/tooltip/generator";
generateTooltips();Variants
By default, no theme variants are generated.
If you are compiling your own version of Graupl, you can set the tooltip module’s $themeable variable to true to generate the .primary, .secondary, and .tertiary variants.
Custom Properties
The following custom properties can be used to customize the tooltip component:
| Property | Description | Default Value |
|---|---|---|
--graupl-tooltip-padding-x | The horizontal padding of the tooltip. | var(--graupl-spacer-0) |
--graupl-tooltip-padding-y | The vertical padding of the tooltip. | var(--graupl-spacer-0) |
--graupl-tooltip-padding | The padding of the tooltip. | var(--graupl-tooltip-padding-y) var(--graupl-tooltip-padding-x) |
--graupl-tooltip-display | The display of the tooltip. | inline |
--graupl-tooltip-width | The width of the tooltip. | fit-content |
--graupl-tooltip-background | The background of the tooltip. | var(--graupl-background) |
--graupl-tooltip-color | The color of the tooltip. | var(--graupl-color) |
--graupl-tooltip-border-color | The border color of the tooltip. | var(--graupl-tooltip-color) |
--graupl-tooltip-border-top-left-radius | The border top left radius of the tooltip. | var(--graupl-border-top-left-radius) |
--graupl-tooltip-border-top-right-radius | The border top right radius of the tooltip. | var(--graupl-border-top-right-radius) |
--graupl-tooltip-border-bottom-left-radius | The border bottom left radius of the tooltip. | var(--graupl-border-bottom-left-radius) |
--graupl-tooltip-border-bottom-right-radius | The border bottom right radius of the tooltip. | var(--graupl-border-bottom-right-radius) |
--graupl-tooltip-border-radius | The border radius of the tooltip. | var(--graupl-tooltip-border-top-left-radius) var(--graupl-tooltip-border-top-right-radius) var(--graupl-tooltip-border-bottom-right-radius) var(--graupl-tooltip-border-bottom-left-radius) |
--graupl-tooltip-border-top-width | The border top width of the tooltip. | 0 |
--graupl-tooltip-border-right-width | The border right width of the tooltip. | 0 |
--graupl-tooltip-border-bottom-width | The border bottom width of the tooltip. | 0 |
--graupl-tooltip-border-left-width | The border left width of the tooltip. | 0 |
--graupl-tooltip-border-width | The border width of the tooltip. | var(--graupl-tooltip-border-top-width) var(--graupl-tooltip-border-right-width) var(--graupl-tooltip-border-bottom-width) var(--graupl-tooltip-border-left-width) |
--graupl-tooltip-border-top-style | The border top style of the tooltip. | var(--graupl-border-top-style) |
--graupl-tooltip-border-right-style | The border right style of the tooltip. | var(--graupl-border-right-style) |
--graupl-tooltip-border-bottom-style | The border bottom style of the tooltip. | var(--graupl-border-bottom-style) |
--graupl-tooltip-border-left-style | The border left style of the tooltip. | var(--graupl-border-left-style) |
--graupl-tooltip-border-style | The border style of the tooltip. | var(--graupl-tooltip-border-top-style) var(--graupl-tooltip-border-right-style) var(--graupl-tooltip-border-bottom-style) var(--graupl-tooltip-border-left-style) |
--graupl-tooltip-description-width | The width of the tooltip description. | 30ch |
--graupl-tooltip-description-color | The color of the tooltip description. | var(--graupl-tooltip-color) |
--graupl-tooltip-description-background | The background of the tooltip description. | var(--graupl-tooltip-background) |
--graupl-tooltip-description-font-size | The tooltip description font size. | inherit |
--graupl-tooltip-description-font-weight | The font weight of the tooltip description. | var(--graupl-root-font-weight) |
--graupl-tooltip-description-font-family | The font family of the tooltip description. | var(--graupl-root-font-family) |
--graupl-tooltip-description-line-height | The line height of the tooltip description. | var(--graupl-root-line-height) |
--graupl-tooltip-description-margin | The margin of the tooltip description. | 0 0 0 0 |
--graupl-tooltip-description-padding-x | The horizontal padding of the tooltip description. | var(--graupl-spacer-3) |
--graupl-tooltip-description-padding-y | The vertical padding of the tooltip description. | var(--graupl-spacer-2) |
--graupl-tooltip-description-padding | The padding of the tooltip description. | var(--graupl-tooltip-description-padding-y) var(--graupl-tooltip-description-padding-x) |
--graupl-tooltip-description-indent | The indent of the tooltip description. | calc(var(--graupl-tooltip-toggle-width) + var(--graupl-spacer-2)) |
--graupl-tooltip-description-top | The top inset of the tooltip description. | auto |
--graupl-tooltip-description-right | The right inset of the tooltip description. | auto |
--graupl-tooltip-description-bottom | The bottom inset of the tooltip description. | auto |
--graupl-tooltip-description-left | The left inset of the tooltip description. | var(--graupl-tooltip-description-indent) |
--graupl-tooltip-description-inset | The inset of the tooltip description. | var(--graupl-tooltip-description-top) var(--graupl-tooltip-description-right) var(--graupl-tooltip-description-bottom) var(--graupl-tooltip-description-left) |
--graupl-tooltip-description-border-color | The border color of the tooltip description. | var(--graupl-tooltip-border-color) |
--graupl-tooltip-description-border-top-left-radius | The border top left radius of the tooltip description. | var(--graupl-border-top-left-radius) |
--graupl-tooltip-description-border-top-right-radius | The border top right radius of the tooltip description. | var(--graupl-border-top-right-radius) |
--graupl-tooltip-description-border-bottom-left-radius | The border bottom left radius of the tooltip description. | var(--graupl-border-bottom-left-radius) |
--graupl-tooltip-description-border-bottom-right-radius | The border bottom right radius of the tooltip description. | var(--graupl-border-bottom-right-radius) |
--graupl-tooltip-description-border-radius | The border radius of the tooltip description. | var(--graupl-tooltip-description-border-top-left-radius) var(--graupl-tooltip-description-border-top-right-radius) var(--graupl-tooltip-description-border-bottom-right-radius) var(--graupl-tooltip-description-border-bottom-left-radius) |
--graupl-tooltip-description-border-top-width | The border top width of the tooltip description. | var(--graupl-border-top-width) |
--graupl-tooltip-description-border-right-width | The border right width of the tooltip description. | var(--graupl-border-right-width) |
--graupl-tooltip-description-border-bottom-width | The border bottom width of the tooltip description. | var(--graupl-border-bottom-width) |
--graupl-tooltip-description-border-left-width | The border left width of the tooltip description. | var(--graupl-border-left-width) |
--graupl-tooltip-description-border-width | The border width of the tooltip description. | var(--graupl-tooltip-description-border-top-width) var(--graupl-tooltip-description-border-right-width) var(--graupl-tooltip-description-border-bottom-width) var(--graupl-tooltip-description-border-left-width) |
--graupl-tooltip-description-border-top-style | The border top style of the tooltip description. | var(--graupl-border-top-style) |
--graupl-tooltip-description-border-right-style | The border right style of the tooltip description. | var(--graupl-border-right-style) |
--graupl-tooltip-description-border-bottom-style | The border bottom style of the tooltip description. | var(--graupl-border-bottom-style) |
--graupl-tooltip-description-border-left-style | The border left style of the tooltip description. | var(--graupl-border-left-style) |
--graupl-tooltip-description-border-style | The border style of the tooltip description. | var(--graupl-tooltip-description-border-top-style) var(--graupl-tooltip-description-border-right-style) var(--graupl-tooltip-description-border-bottom-style) var(--graupl-tooltip-description-border-left-style) |
--graupl-tooltip-toggle-width | The width of the tooltip toggle. | var(--graupl-button-min-width) |
--graupl-tooltip-toggle-height | The height of the tooltip toggle. | var(--graupl-button-min-height) |
--graupl-tooltip-toggle-content | The content of the tooltip toggle. | "i" |
--graupl-tooltip-toggle-font-family | The font family of the tooltip toggle. | serif |
--graupl-tooltip-toggle-font-size | The font size of the tooltip toggle. | var(--graupl-font-size-sm) |
--graupl-tooltip-toggle-font-weight | The font weight of the tooltip toggle. | var(--graupl-font-weight-bold) |
--graupl-tooltip-toggle-padding-x | The horizontal padding of the tooltip toggle. | var(--graupl-spacer-1) |
--graupl-tooltip-toggle-padding-y | The vertical padding of the tooltip toggle. | var(--graupl-spacer-1) |
--graupl-tooltip-toggle-padding | The padding of the tooltip toggle. | var(--graupl-tooltip-toggle-padding-y) var(--graupl-tooltip-toggle-padding-x) |
--graupl-tooltip-toggle-border-top-left-radius | The border top left radius of the tooltip toggle. | 100vw |
--graupl-tooltip-toggle-border-top-right-radius | The border top right radius of the tooltip toggle. | 100vw |
--graupl-tooltip-toggle-border-bottom-left-radius | The border bottom left radius of the tooltip toggle. | 100vw |
--graupl-tooltip-toggle-border-bottom-right-radius | The border bottom right radius of the tooltip toggle. | 100vw |
--graupl-tooltip-toggle-border-radius | The border radius of the tooltip toggle. | var(--graupl-tooltip-toggle-border-top-left-radius) var(--graupl-tooltip-toggle-border-top-right-radius) var(--graupl-tooltip-toggle-border-bottom-right-radius) var(--graupl-tooltip-toggle-border-bottom-left-radius) |
--graupl-tooltip-toggle-background | The background of the tooltip toggle. | var(--graupl-tooltip-background) |
--graupl-tooltip-toggle-visited-background | The visited background of the tooltip toggle. | var(--graupl-tooltip-toggle-background) |
--graupl-tooltip-toggle-focus-background | The focus background of the tooltip toggle. | var(--graupl-tooltip-toggle-background) |
--graupl-tooltip-toggle-hover-background | The hover background of the tooltip toggle. | var(--graupl-tooltip-color) |
--graupl-tooltip-toggle-active-background | The active background of the tooltip toggle. | var(--graupl-tooltip-toggle-hover-background) |
--graupl-tooltip-toggle-selected-background | The selected background of the tooltip toggle. | var(--graupl-tooltip-toggle-hover-background) |
--graupl-tooltip-toggle-disabled-background | The disabled background of the tooltip toggle. | var(--graupl-tooltip-background) |
--graupl-tooltip-toggle-color | The color of the tooltip toggle. | var(--graupl-tooltip-color) |
--graupl-tooltip-toggle-visited-color | The visited color of the tooltip toggle. | var(--graupl-tooltip-toggle-color) |
--graupl-tooltip-toggle-focus-color | The focus color of the tooltip toggle. | var(--graupl-tooltip-toggle-color) |
--graupl-tooltip-toggle-hover-color | The hover color of the tooltip toggle. | var(--graupl-tooltip-background) |
--graupl-tooltip-toggle-active-color | The active color of the tooltip toggle. | var(--graupl-tooltip-toggle-hover-color) |
--graupl-tooltip-toggle-selected-color | The selected color of the tooltip toggle. | var(--graupl-tooltip-toggle-hover-color) |
--graupl-tooltip-toggle-disabled-color | The disabled color of the tooltip toggle. | var(--graupl-theme-active--primary--200) |
--graupl-tooltip-toggle-border-color | The border color of the tooltip toggle. | var(--graupl-tooltip-border-color) |
--graupl-tooltip-toggle-visited-border-color | The visited border color of the tooltip toggle. | var(--graupl-tooltip-toggle-border-color) |
--graupl-tooltip-toggle-focus-border-color | The focus border color of the tooltip toggle. | var(--graupl-tooltip-toggle-border-color) |
--graupl-tooltip-toggle-hover-border-color | The hover border color of the tooltip toggle. | var(--graupl-tooltip-border-color) |
--graupl-tooltip-toggle-active-border-color | The active border color of the tooltip toggle. | var(--graupl-tooltip-toggle-hover-border-color) |
--graupl-tooltip-toggle-selected-border-color | The selected border color of the tooltip toggle. | var(--graupl-tooltip-toggle-hover-border-color) |
--graupl-tooltip-toggle-disabled-border-color | The disabled border color of the tooltip toggle. | var(--graupl-theme-active--primary--200) |
--graupl-tooltip-toggle-transform | The transform of the tooltip toggle. | none |
--graupl-tooltip-toggle-visited-transform | The visited transform of the tooltip toggle. | var(--graupl-tooltip-toggle-transform) |
--graupl-tooltip-toggle-focus-transform | The focus transform of the tooltip toggle. | var(--graupl-tooltip-toggle-transform) |
--graupl-tooltip-toggle-hover-transform | The hover transform of the tooltip toggle. | var(--graupl-tooltip-toggle-transform) |
--graupl-tooltip-toggle-active-transform | The active transform of the tooltip toggle. | none |
--graupl-tooltip-toggle-selected-transform | The selected transform of the tooltip toggle. | none |
--graupl-tooltip-toggle-disabled-transform | The disabled transform of the tooltip toggle. | none |
Sass variables
The following Sass variables can be used to customize the generation of the tooltip component:
| Variable | Description | Default Value |
|---|---|---|
$selector-base | Default for selector base. | "." |
$modifier-selector-base | Default for modifier selector base. | "." |
$generate-base-theme-map | Default for generate base theme map. | true |
$themeable | Default for themeable. | false |
$tooltip-selector-base | Default for tooltip selector base. | "." |
$tooltip-selector | Default for tooltip selector. | "tooltip" |
$tooltip-theme-selector-base | Default for tooltip theme selector base. | "." |
$tooltip-theme-selector-prefix | Default for tooltip theme selector prefix. | "" |
$tooltip-toggle-selector-base | Default for tooltip button selector base. | "." |
$tooltip-toggle-selector | Default for tooltip button selector. | "tooltip-toggle" |
$tooltip-description-selector-base | Default for tooltip description selector base. | "." |
$tooltip-description-selector | Default for tooltip description selector. | "tooltip-description" |
$tooltip-hidden-selector-base | Default for tooltip hidden selector base. | "." |
$tooltip-hidden-selector | Default for tooltip hidden selector. | "hide" |
$tooltip-shown-selector-base | Default for tooltip shown selector base. | "." |
$tooltip-shown-selector | Default for tooltip shown selector. | "show" |
$tooltip-transitioning-selector-base | Default for tooltip transitioning selector base. | "." |
$tooltip-transitioning-selector | Default for tooltip transitioning selector. | "transitioning" |
$tooltip-theme-mappings | Default for tooltip theme mappings. | () |
$tooltip-theme-map | Default for tooltip theme map. | () |
$tooltip-toggle-initial-transform | Default for tooltip toggle initial transform. | none |
$tooltip-toggle-final-transform | Default for tooltip toggle final transform. | none |
$tooltip-toggle-disabled-transform | Default for tooltip toggle disabled transform. | $tooltip-toggle-initial-transform |
$tooltip-display | Default for tooltip display. | inline |
$tooltip-width | Default for tooltip width. | fit-content |
$tooltip-description-width | Default for tooltip description width. | 30ch |