Tooltip
Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen.
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”. |
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" 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" href="#!" >}}Light{{< /tooltip >}}•
{{< tooltip color="dark" title="Tooltip" 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 >}}