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:
| Argument | Required | Description |
|---|---|---|
| color | No | Optional theme color of the element, either “primary” (default), “secondary”, “success”, “danger”, “warning”, “info”, “light”, or “dark”. |
| title | Yes | Title to display in the tooltip. |
| href | Yes | Address for the button or hyperlink. |
| placement | No | How to position the tooltip: “top” (default), “bottom”, “left”, or “right”. |
| class | No | Optional class attribute of the tooltip’s button element. |
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 >}}