Tooltip
Use the tooltip shortcode to display a tooltip for a hyperlink.
Use the tooltip shortcode to display a tooltip for a hyperlink. Refer to the
Button on how to display a tooltip for a button instead. The inner content is used as hyperlink text. As an example, the following shortcode displays a tooltip for a colored hyperlink.
{{< tooltip color="info" title="Tooltip" href="#!" >}}
Tooltip demonstration
{{< /tooltip >}}The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| class | string | Class attribute of the tooltip’s button element. | ||
| color | select | dark | Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark]. | |
| href | url | Address for the button or hyperlink. | ||
| placement | select | top | Position of the tooltip. Supported values: [top, bottom, left, right]. | |
| spacing | bool | true | Flag to add spacing to the inline tooltip. | |
| title | string | Plain text to display in the tooltip. |
| Name | Type | Required | Default |
|---|---|---|---|
| class | string | ||
| Class attribute of the tooltip’s button element. | |||
| color | select | dark | |
| Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark]. | |||
| href | url | ||
| Address for the button or hyperlink. | |||
| placement | select | top | |
| Position of the tooltip. Supported values: [top, bottom, left, right]. | |||
| spacing | bool | true | |
| Flag to add spacing to the inline tooltip. | |||
| title | string | ||
| Plain text to display in the tooltip. | |||
Change the style of your tooltip with shortcode arguments.
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.
{{< tooltip color="primary" title="Tooltip" href="#!" >}}Primary{{< /tooltip >}}•
{{< tooltip color="secondary" title="Tooltip" class="d-none-dark" href="#!" >}}Secondary{{< /tooltip >}}
{{< tooltip color="secondary" title="Tooltip" class="d-none-light bg-light" href="#!" >}}Secondary{{< /tooltip >}}•
{{< tooltip color="success" title="Tooltip" href="#!" >}}Success{{< /tooltip >}}•
{{< tooltip color="danger" title="Tooltip" href="#!" >}}Danger{{< /tooltip >}}•
{{< tooltip color="warning" title="Tooltip" href="#!" >}}Warning{{< /tooltip >}}•
{{< tooltip color="info" title="Tooltip" href="#!" >}}Info{{< /tooltip >}}•
{{< tooltip color="light" title="Tooltip" class="bg-dark" href="#!" >}}Light{{< /tooltip >}}•
{{< tooltip color="dark" title="Tooltip" class="d-none-dark" href="#!" >}}Dark{{< /tooltip >}}
{{< tooltip color="dark" title="Tooltip" class="d-none-light bg-light" href="#!" >}}Dark{{< /tooltip >}}Set placement to adjust the placement of the tooltip.
{{< tooltip title="Tooltip" href="#!" placement="top" >}}Top{{< /tooltip >}}•
{{< tooltip title="Tooltip" href="#!" placement="bottom" >}}Bottom{{< /tooltip >}}•
{{< tooltip title="Tooltip" href="#!" placement="left" >}}Left{{< /tooltip >}}•
{{< tooltip title="Tooltip" href="#!" placement="right" >}}Right{{< /tooltip >}}