Tooltips

Our tooltips are powered Shoelace's Tooltip component, which is using Floating UI under the hood for automatic positioning.

Usage

This sentence have a tooltipThis is an example tooltip . The code for this example:

<sl-tooltip>
    <span class="_underline">tooltip</span>
    <span slot="content">This is an example tooltip</span>
</sl-tooltip>

sl-tooltip only accepts a single child, so wrap multiple elements in a span or a div.

The code for this example:

<sl-tooltip>
    <div>
        <p>You can hover any part of this block to show a tooltip</p>
        <p>Including this <a href="#">link element</a></p>
    </div>
    <div slot="content">
        <h3>How to use</h3>
        <p>You can <i>add custom HTML</i> in tootlips, but not links.</p>
    </div>
</sl-tooltip>

This example also shows how to add HTML inside a tooltip.
Note: Tooltips are meant for short hints only. Users cannot select or click anything inside a tooltip, including links. Keep the content brief and informational.

The hover_helper() macro

We have a Jinja macro (in macros.html) for providing a simple help-tooltip with an icon. It looks like this: This is the hover_helper speaking

The code for this example

{{ hover_helper('This is the hover_helper speaking') }}

It only accepts a simple string. If you need more flexibility, please use the sl-tooltip directly as outlined above.