Tooltip

Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen.

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.

Arguments

The shortcode supports the following arguments:

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

Example

As an example, the following shortcode displays a tooltip for a colored hyperlink.

markdown
{{< tooltip color="warning" title="Tooltip" href="#" >}}
    Tooltip demonstration
{{< /tooltip >}}
Last updated: February 12, 2023 • Upgrade to docs v0.9 (2caaad8)