salla-tooltip
Shows a small text bubble above another element while the mouse is over that element.
Shows a small text bubble above another element while the mouse is over that element.
Use it to explain an icon or button. The target is any element with an id, referenced by target-id. The bubble is displayed above the tooltip's own position, so place salla-tooltip next to (or inside) the target.
The tooltip is driven by mouse hover only; there is no keyboard focus handling.
Use it
In HTML or JSX, use the tag <salla-tooltip> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaTooltip } from '@salla.sa/twilight-components-react/tooltip';Try it
web-components/salla-tooltip
Example
import { SallaTooltip } from '@salla.sa/twilight-components-react/tooltip';
export function Example() {
return (
<>
<button id="help-btn">?</button>
<SallaTooltip targetId="help-btn" text="Free shipping over 200 SAR" />
</>
);
}import { SallaTooltip } from '@salla.sa/twilight-components-react/tooltip';
export function Example() {
return (
<SallaTooltip targetId="help-btn" theme="dark"><b>Tip:</b> hover to read more</SallaTooltip>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
targetId | target-id | The id of the element that triggers the tooltip on mouse hover. The element is looked up once, when the tooltip loads, so it must already exist in the page. | string | |
text | text | Plain text shown in the tooltip. If empty, the element's child content is shown instead. | string | |
theme | theme | Visual style of the bubble: default (uses the theme primary colour) or dark. Any other value falls back to default. | string | 'default' |
Slots
| Slot | Description |
|---|---|
| (default) | Content of the bubble, used only when text is empty. |
Related
Used inside: <salla-comment-item>, <salla-conditional-offer>, <salla-wallet>.