Tooltip Component
The ds-tooltip component displays additional information when hovering over an element.
Basic Usage
Section titled “Basic Usage”<ds-tooltip text="This is helpful information"> Hover over me </ds-tooltip>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)”<ds-tooltip text="Appears above" position="top"> Hover me </ds-tooltip>Bottom
Section titled “Bottom”<ds-tooltip text="Appears below" position="bottom"> Hover me </ds-tooltip>Left & Right
Section titled “Left & Right”<ds-tooltip text="Appears on left" position="left"> Hover me </ds-tooltip>
<ds-tooltip text="Appears on right" position="right"> Hover me </ds-tooltip>Examples
Section titled “Examples”With Icons
Section titled “With Icons”<ds-tooltip text="More information"> <ds-icon name="note"></ds-icon></ds-tooltip>In Buttons
Section titled “In Buttons”<ds-button> <ds-tooltip text="Save your changes"> Save </ds-tooltip></ds-button>Accessibility
Section titled “Accessibility”Tooltips are accessible and work with keyboard navigation. The tooltip appears on both hover and focus events.