A tooltip is a floating label that briefly explains an action, function, or an element. Its content is exclusively text and shouldn't be vital information for users. If richer media is desired, consider using a popover instead.
Applies tooltip's base styles.
Shows the tooltip.
Hides the tooltip.
Allows the tooltip to become visible on hover or focus-visible; applies to the element triggering the tooltip. This is a CSS-only solution and not recommended.
Inverts styles to work on dark backgrounds.
Defines which side of the tooltip its arrow appears. This is required as no arrow is assigned by default. Examples below.
No arrow direction is assigned by default. You must select a direction. Twelve directions are offered: three on each face of the tooltip.
Ensures more reliable voiceover support.
Reads out the tooltip content as a supplementary description for its trigger when the trigger is focused. The aria-describedby value should be the trigger's CSS ID.