Tooltip Component
Overview
Section titled “Overview”The tooltip-v1 component displays additional information when hovering over an element.
Basic Usage
Section titled “Basic Usage”<tooltip-v1 text="This is helpful information"> Hover over me </tooltip-v1>Attributes
Section titled “Attributes”| Attribute | Type | Default | Description |
|---|---|---|---|
text | string | - | Tooltip content to display |
position | 'top' | 'bottom' | 'left' | 'right' | 'top' | Tooltip position |
Positioning
Section titled “Positioning”Top (Default)
Section titled “Top (Default)”<tooltip-v1 text="Appears above" position="top"> Hover me </tooltip-v1>Bottom
Section titled “Bottom”<tooltip-v1 text="Appears below" position="bottom"> Hover me </tooltip-v1>Left & Right
Section titled “Left & Right”<tooltip-v1 text="Appears on left" position="left"> Hover me </tooltip-v1>
<tooltip-v1 text="Appears on right" position="right"> Hover me </tooltip-v1>Examples
Section titled “Examples”With Icons
Section titled “With Icons”<tooltip-v1 text="More information"> <icon-v1 name="note"></icon-v1></tooltip-v1>In Buttons
Section titled “In Buttons”<button-v1> <tooltip-v1 text="Save your changes"> Save </tooltip-v1></button-v1>Accessibility
Section titled “Accessibility”Tooltips are accessible and work with keyboard navigation. The tooltip appears on both hover and focus events.