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 >
Property Type Default Description contentstring''Plain-text tooltip content. Ignored when the content slot is used. placement'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end''top'Where the tooltip sits relative to the trigger. variant'dark' | 'light' | 'info' | 'success' | 'warning' | 'danger''dark'Colour theme. size'sm' | 'md' | 'lg''md'Size scale. trigger'hover' | 'click' | 'manual''hover'What opens the tooltip. hover also responds to keyboard focus. openbooleanfalseOpen state (use with trigger="manual" for full control). arrowbooleanfalseShow a pointing arrow. disabledbooleanfalseDisable the tooltip entirely. openDelaynumber300Delay before showing on hover/focus, in ms. closeDelaynumber0Delay before hiding on leave/blur, in ms.
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.
