A small contextual label that appears on hover or keyboard focus. Wrap the trigger in the default slot and pass the text via the content attribute (or the content slot for rich markup). Shows on hover and focus for accessibility, dismisses on Escape, and flips on the main axis when it would overflow the viewport.
Hover me
Show code Copy < nana-tooltip content = "Saves your changes" > < nana-button >Hover me</ nana-button > </ nana-tooltip >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/tooltip " ;
< nana-tooltip content = " Saves your changes " >
< nana-button > Hover me </ nana-button >
Top Right Bottom Left
Show code Copy < nana-tooltip content = "Top" placement = "top" arrow >< nana-button variant = "secondary" size = "sm" >Top</ nana-button ></ nana-tooltip > < nana-tooltip content = "Right" placement = "right" arrow >< nana-button variant = "secondary" size = "sm" >Right</ nana-button ></ nana-tooltip > < nana-tooltip content = "Bottom" placement = "bottom" arrow >< nana-button variant = "secondary" size = "sm" >Bottom</ nana-button ></ nana-tooltip > < nana-tooltip content = "Left" placement = "left" arrow >< nana-button variant = "secondary" size = "sm" >Left</ nana-button ></ nana-tooltip >
Dark Light Success Danger Info Warning
Show code Copy < nana-tooltip content = "Dark" variant = "dark" arrow >< nana-button variant = "secondary" size = "sm" >Dark</ nana-button ></ nana-tooltip > < nana-tooltip content = "Light" variant = "light" arrow >< nana-button variant = "secondary" size = "sm" >Light</ nana-button ></ nana-tooltip > < nana-tooltip content = "Success" variant = "success" arrow >< nana-button variant = "secondary" size = "sm" >Success</ nana-button ></ nana-tooltip > < nana-tooltip content = "Danger" variant = "danger" arrow >< nana-button variant = "secondary" size = "sm" >Danger</ nana-button ></ nana-tooltip > < nana-tooltip content = "Info" variant = "info" arrow >< nana-button variant = "secondary" size = "sm" >Info</ nana-button ></ nana-tooltip > < nana-tooltip content = "Warning" variant = "warning" arrow >< nana-button variant = "secondary" size = "sm" >Warning</ nana-button ></ nana-tooltip >
Properties Property Attribute Type Default Description arrow— booleanfalseShow a pointing arrow. closeDelayclose-delaynumber0Delay before hiding on leave/blur, in ms. content— string''Plain-text tooltip content. Ignored when the `content` slot is used. disabled— booleanfalseDisable the tooltip entirely. open— booleanfalseOpen state (use with `trigger="manual"` for full control). openDelayopen-delaynumber300Delay before showing on hover/focus, in ms. placement— TooltipPlacement'top'Where the tooltip sits relative to the trigger. size— TooltipSize'md'Size scale. trigger— TooltipTrigger'hover'What opens the tooltip. `hover` also responds to keyboard focus. variant— TooltipVariant'dark'Colour theme.
Events Event Description nana-showFired when the tooltip opens nana-hideFired when the tooltip closes
Slots Slot Description (default)The trigger element the tooltip describes contentRich tooltip content (overrides the `content` attribute)
CSS parts Part Description ::part(base)The positioning container ::part(body)The tooltip bubble ::part(arrow)The arrow
CSS custom properties Property Description --nana-tooltip-bgBubble background --nana-tooltip-colorBubble text colour --nana-tooltip-max-widthMax bubble width before wrapping
Event Type Description nana-showCustomEventFired when the tooltip opens nana-hideCustomEventFired when the tooltip closes
Slot Description (default)The trigger element the tooltip describes contentRich tooltip content (overrides the content attribute)
Variable Default Description --nana-tooltip-bg— Bubble background --nana-tooltip-color— Bubble text colour --nana-tooltip-max-width— Max bubble width before wrapping
Part Description baseThe positioning container bodyThe tooltip bubble arrowThe pointing arrow triggerThe trigger wrapper
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Tooltip interactively Every state, prop, and edge case — with live controls — in Storybook.
