Docs

Tooltip

Last modified on June 7, 2025 • 3 min read • 512 words
Component  
Component  
Share via

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

Overview   Arguments   Examples   Colored Tooltip   Placement  

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:

Name Type Required Default Comment
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, template.URL, url 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, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
Name Type Required Default
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, template.URL, url
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, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.

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
Secondary
•
Success
•
Danger
•
Warning
•
Info
•
Light
•
Dark
Dark
markdown 
{{< tooltip color="primary" title="Tooltip" href="#!" >}}Primary{{< /tooltip >}}&bull;
{{< 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 >}}&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" class="bg-dark" href="#!" >}}Light{{< /tooltip >}}&bull;
{{< 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 >}}

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 >}}
On this page: