Our tooltips are powered Shoelace's Tooltip component, which is using Floating UI under the hood for automatic positioning.
This sentence have a
<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.
You can hover any part of this block to show a tooltip
Including this link element
You can add custom HTML in tootlips, but not links.
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.
hover_helper()
macro
We have a Jinja macro (in macros.html
) for providing a simple help-tooltip with an icon. It looks like this:
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.