ComboStrap UI - Tooltip

A Tooltip displays informative text when users hover over, focus on, or tap an element.

By default, when hovering over a link, you get the default HTML tooltip with the page description as content.

With the tooltip component, you can attach any tooltip to any component.

Because a link should be written on one line, you need to inline the tooltip markup.

Example:

• Markup

[[#|<tooltip position="right">A tooltip</tooltip>A link with a tooltip on the right]]

• Output:

A link with a tooltip on the right

A link can get a automatic tooltip via the link preview attribute.

• Markup

[[?preview|A link with a tooltip]]

• Output:

A link with a tooltip

Adding a tooltip to a button.

Example:

• Markup

<btn>
<tooltip position="top">
=== Tooltip Heading ===
A tooltip text
</tooltip>
A button with a tooltip on the top
</btn>

• Output:

A button with a tooltip on the top

You can also add a tooltip on words. For instance, with the itext component

• Markup

<itext><tooltip>A tooltip on words can also be added</tooltip>Tooltip on words</itext>

• Output:

Tooltip on words

You can also add a tooltip on a icon.

• Markup

<icon name="information-outline">
<tooltip>
=== Icon tooltip ===
A tooltip on a icon can also be added
</tooltip></icon>

• Output:

Adding a tooltip on a image is not directly supported but if you see your image as text and wrap it up inside a itext, you get the same effect.

Example:

• Markup

<itext class="d-inline-block">
<tooltip>
=== Image tooltip ===
A surfer at the beach
</tooltip>
{{:docs:block:stock_image_surfer_in_the_see.png?200|}}
</itext>

• Output:

A tooltip is a UI component that adds a tooltip to its direct parent.

<tooltip position="top">
The tooltip content
</tooltip>

where:

• position is one of top (Default),right,bottom, left
• the tooltip content can be any markup (heading, image, ..)