This is a non-actionable float tag used to explain a user interface element or feature.
We use as a base Tooltipster changing its style with the characteristics of our design system.

Place the following <script></script> near the end of your html, right before the closing <body> tag, to enable them. 
$('.tooltip').tooltipster({
    theme: 'tooltipster-panelita',
    position: 'right'
});
content_copy
Tooltipster requires jquery 3.6 in your page.
Short tooltip 
<span class="tooltip" title="I'm a short tooltip">Hover to show short tooltip</span>
Long tooltip 
<span class="tooltip" title="I'm a long, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, long tooltip">Hover to show long tooltip</span>
General guidelines
  • Tooltips should not be longer than 110 characters. That comes to four full lines for an effective message.

  • Be direct, simply tell the user exactly what they need to know.