# Tooltip

Use the tooltip shortcode to display a tooltip for a hyperlink.

## Overview

Use the `tooltip` shortcode to display a tooltip for a hyperlink. Refer to the [button](button) on how to display a tooltip for a button instead.

### Regular tooltip

Provide a `title` for the tooltip text. It appears when hovering over the inner text.

```markdown
{{< tooltip title="Tooltip" >}}
    Hover over me
{{< /tooltip >}}
```

### Hyperlink tooltip

Add a `href` to create a hyperlink with a tooltip.

```markdown
{{< tooltip title="Tooltip" href="#!" >}}
    Hyperlink
{{< /tooltip >}}
```

### Colored tooltip

Set `color` to adjust the color of the text element to which the tooltip is applied. As an example, the following shortcodes display a tooltip for each available color.

```markdown
{{< tooltip color="primary" title="Tooltip" >}}Primary{{< /tooltip >}}&bull;
{{< tooltip color="secondary" title="Tooltip" class="d-none-dark" >}}Secondary{{< /tooltip >}}
{{< tooltip color="secondary" title="Tooltip" class="d-none-light bg-light" >}}Secondary{{< /tooltip >}}&bull;
{{< tooltip color="success" title="Tooltip" >}}Success{{< /tooltip >}}&bull;
{{< tooltip color="danger" title="Tooltip" >}}Danger{{< /tooltip >}}&bull;
{{< tooltip color="warning" title="Tooltip" >}}Warning{{< /tooltip >}}&bull;
{{< tooltip color="info" title="Tooltip" >}}Info{{< /tooltip >}}&bull;
{{< tooltip color="light" title="Tooltip" class="bg-dark" >}}Light{{< /tooltip >}}&bull;
{{< tooltip color="dark" title="Tooltip" class="d-none-dark" >}}Dark{{< /tooltip >}}
{{< tooltip color="dark" title="Tooltip" class="d-none-light bg-light" >}}Dark{{< /tooltip >}}
```

### Placement

Set `placement` to adjust the placement of the tooltip.

```markdown
{{< tooltip title="Tooltip" placement="top" >}}Top{{< /tooltip >}}&bull;
{{< tooltip title="Tooltip" placement="bottom" >}}Bottom{{< /tooltip >}}&bull;
{{< tooltip title="Tooltip" placement="left" >}}Left{{< /tooltip >}}&bull;
{{< tooltip title="Tooltip" placement="right" >}}Right{{< /tooltip >}}
```

## Styling

Check the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/tooltips/#css) for additional styling options.

## Arguments

The shortcode supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `class` | string |  |  | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. |
| `color` | select |  | `dark` | Theme color of the element. Supported values: [`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `white`, `black`, `body`, `body-tertiary`]. |
| `href` | string |  |  | Address for the button or hyperlink. When set for a card group, a button is added if the list exceeds the maximum number of cards to display. |
| `placement` | select |  | `top` | Position of the tooltip. Supported values: [`top`, `bottom`, `left`, `right`]. |
| `spacing` | bool |  |  | Flag to add spacing to the inline element. |
| `title` | string |  |  | Title of the element. If the element references a (local) page, the title overrides the referenced page's title. |