components / global
tooltip
Tooltip adds shared hover and focus messaging around any trigger element. The same contract powers both the no-JS CSS tooltip and the enhanced floating layer used after the binder boots.
| field | value |
| group | global |
| import | @arieare/ds/Tooltip.astro |
| source | packages/ds/src/components/tooltip/Tooltip.astro
packages/ds/src/components/tooltip/tooltip.css |
component tokens
| token | source | description |
--ds-tooltip-bg / --ds-tooltip-ink | @arieare/ds/tokens.css | Controls tooltip surface and text colors. |
--ds-tooltip-font / --ds-tooltip-feature-settings | @arieare/ds/tokens.css | Keeps tooltip copy on the shared small-body type contract. |
--ds-tooltip-offset / --ds-tooltip-max-width | @arieare/ds/tokens.css | Defines tooltip offset from the trigger and its maximum readable width. |
props
| prop | type | default | description |
text | string | — | Tooltip copy rendered in the fallback layer and enhanced floating layer. |
position | "top" | "bottom" | "left" | "right" | "top" | Controls tooltip placement around the trigger. |
tabindex | string | number | — | Optional keyboard focus target when the wrapped child is not natively focusable. |
class | string | "" | Extra class names applied to the tooltip wrapper span. |
role / aria-label | string | — | Optional role and accessible name overrides for icon-only or non-text triggers. |