Table of Contents

About

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

Tooltip Illustration

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

Example

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




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

Link Title Tooltip

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

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:

Tooltip on words

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:

Stock Image Surfer In The See

To see the tooltip immediately when hovering on the image the class d-inline-block on the itext component is mandatory. The itext component takes then the same size than the image)

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