Tooltip

Share via

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 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 demonstration
markdown
{{< tooltip color="info" title="Tooltip" href="#!" >}}
    Tooltip demonstration
{{< /tooltip >}}

Arguments

The shortcode supports the following arguments:

ArgumentRequiredDescription
colorNoOptional theme color of the element, either “primary” (default), “secondary”, “success”, “danger”, “warning”, “info”, “light”, or “dark”.
titleYesTitle to display in the tooltip.
hrefYesAddress for the button or hyperlink.
placementNoHow to position the tooltip: “top” (default), “bottom”, “left”, or “right”.

Examples

Change the style of your tooltip with shortcode arguments.

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.

Primary
•
Secondary
•
Success
•
Danger
•
Warning
•
Info
•
Light
•
Dark
markdown
{{< tooltip color="primary" title="Tooltip" href="#!" >}}Primary{{< /tooltip >}}&bull;
{{< tooltip color="secondary" title="Tooltip" href="#!" >}}Secondary{{< /tooltip >}}&bull;
{{< tooltip color="success" title="Tooltip" href="#!" >}}Success{{< /tooltip >}}&bull;
{{< tooltip color="danger" title="Tooltip" href="#!" >}}Danger{{< /tooltip >}}&bull;
{{< tooltip color="warning" title="Tooltip" href="#!" >}}Warning{{< /tooltip >}}&bull;
{{< tooltip color="info" title="Tooltip" href="#!" >}}Info{{< /tooltip >}}&bull;
{{< tooltip color="light" title="Tooltip" href="#!" >}}Light{{< /tooltip >}}&bull;
{{< tooltip color="dark" title="Tooltip" href="#!" >}}Dark{{< /tooltip >}}

Placement

Set placement to adjust the placement of the tooltip.

Top
•
Bottom
•
Left
•
Right
markdown
{{< tooltip title="Tooltip" href="#!" placement="top" >}}Top{{< /tooltip >}}&bull;
{{< tooltip title="Tooltip" href="#!" placement="bottom" >}}Bottom{{< /tooltip >}}&bull;
{{< tooltip title="Tooltip" href="#!" placement="left" >}}Left{{< /tooltip >}}&bull;
{{< tooltip title="Tooltip" href="#!" placement="right" >}}Right{{< /tooltip >}}
Last updated: June 29, 2023 • Rename base docs folder from 0.9 to latest (8a90ed7)
On this page