ComboStrap UI - Tooltip

Undraw Add Content Re Vgqa

ComboStrap UI - Tooltip

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:




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:

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




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Low Quality Content Effect
ComboStrap SEO - Low Quality Page Protection (LQPP)

If your website has a lot of low quality page: your SEO score will be lower you can even get at worse the penalty and be deleted from the search engine index. This feature if enabled makes low quality...
Undraw Add Content Re Vgqa
ComboStrap UI - Inote (inline note)

The inote is a note that can be added along side a text (ie inline). It gives emphasis on an ancillary text that adds context to the primary text. As a replacement, you could also use: a tooltip ...
Tooltip Illustration
ComboStrap UI - Tooltip

A Tooltip displays informative text when users hover over, focus on, or tap an element.
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion
Combostrap Link Preview
The Link component

The link component permits to create hyperlinks between pages.
Lpp Login Link
What is the Late Publication Protection feature ?

With late publication protection, the article that are not yet published will not be advertised to the world until the date is due



Task Runner