Docs

Tooltip

Use the tooltip shortcode to display a tooltip for a hyperlink.
Overview   Regular Tooltip   Hyperlink Tooltip   Colored Tooltip   Placement   Styling   Arguments  

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.

Regular Tooltip  

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

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

Add a href to create a hyperlink with a tooltip.

Hyperlink  
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.

Primary  
•
Secondary  
Secondary  
•
Success  
•
Danger  
•
Warning  
•
Info  
•
Light  
•
Dark  
Dark  
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.

Top  
•
Bottom  
•
Left  
•
Right  
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  for additional styling options.

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.
On this page