RhombusKit

Tooltip

A tooltip is a small label that appears on hover or focus to explain a control. [rhombusTooltip] composes Material's [matTooltip] via hostDirectives, so you import one directive, apply it to any element, and route its colour through the --tooltip-bg / --tooltip-text tokens — toggle the theme above and it re-skins without touching markup.

Example

When to use

  • Use a tooltip for a brief, supplementary hint on an interactive element — most often an icon-only button. It is hover/focus-only, so never put essential information or actions inside it.
  • Reach for it when the host already has its own accessible name and you just want to add a short clarifying label on demand, without taking up persistent space in the layout.

When not to use

  • For rich, interactive content anchored to a trigger (forms, date grids, multi-control panels), use a Popover.
  • For a list of actions off a trigger, use a Menu (or an Overflow Menu for row actions).
  • For a persistent, in-flow status message, use an Alert; for a transient notification, use a Toast.

Related components

  • Popover — focus-trapped panels of arbitrary content.
  • Menu — action lists off a trigger.
  • Button — the most common tooltip host.

Was this page helpful?