ComboStrap UI - Tooltip

About

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

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

Example

A link with a custom tooltip

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 the preview tooltip

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

• Markup

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

• Output:

Button

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:

Text

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:

Icon

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:

Image

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:

Syntax

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, ..)