CNVS

Tooltips

Tooltips are used to provide added detail to an element.

Table of Contents
This is a simple tooltip 
<div class="tooltip">
  This is a simple tooltip
</div>

Tooltip Positions

You can include more than body text in a message. Messages can support any HTML content. All type styling will be retained. However, if you add the class .message-type-styling to any typographic element, the preferred message type color and styling will be applied. For links, add the class .message-link to any <a>.

Class Description
.tooltip-below Style tooltip to position below reference element.
.tooltip-right Style tooltip to position right of reference element.
.tooltip-left Style tooltip to position left of reference element.
Tooltip above element
Tooltop below element
Tooltip to right of element
Tooltip to left of element 
<div class="tooltip tooltip-bottom">
  This is a simple tooltip
</div>

Interactive Demo

You can include more than body text in a message. Messages can support any HTML content. All type styling will be retained. However, if you add the class .message-type-styling to any typographic element, the preferred message type color and styling will be applied. For links, add the class .message-link to any <a>.

<div class="tooltip tooltip-top">
  This is a simple tooltip
</div>