# salla-tooltip (https://docs.salla.dev/twilight/react/web-components/salla-tooltip)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 [#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).

```tsx
import { SallaTooltip } from '@salla.sa/twilight-components-react/tooltip';
```

## Try it [#try-it]

<Demo name="web-components/salla-tooltip" />

## Example [#example]

```tsx
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" />
    </>
  );
}
```

```html
<button id="help-btn">?</button>
<salla-tooltip target-id="help-btn" text="Free shipping over 200 SAR"></salla-tooltip>
```

```tsx
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>
  );
}
```

```html
<salla-tooltip target-id="help-btn" theme="dark"><b>Tip:</b> hover to read more</salla-tooltip>
```

## Properties [#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 [#slots]

| Slot      | Description                                            |
| --------- | ------------------------------------------------------ |
| (default) | Content of the bubble, used only when `text` is empty. |

## Related [#related]

Used inside: [`<salla-comment-item>`](https://docs.salla.dev/twilight/react/web-components/salla-comment-item), [`<salla-conditional-offer>`](https://docs.salla.dev/twilight/react/web-components/salla-conditional-offer), [`<salla-wallet>`](https://docs.salla.dev/twilight/react/web-components/salla-wallet).