Tooltip
The tooltip component can display a simple text or more advanced HTML content.
It is typically used to display a small amount of complementary information.
<div class="lui-tooltip">
Simple tooltip
<div class="lui-tooltip__arrow lui-tooltip__arrow--right"></div>
</div>
<div class="lui-tooltip" style="width: 200px;">
This tooltip has <b>HTML content</b> and is displayed over multiple lines.
<div class="lui-tooltip__arrow lui-tooltip__arrow--right"></div>
</div>
Tooltip JS
<div>
<a class="tooltip-trigger" aria-haspopup="true" title="This is the tooltip text to be displayed">Hover me (top)</a>
</div>
<div>
<a class="tooltip-trigger" aria-haspopup="true" title="This is the tooltip text to be displayed">Hover me (right)</a>
</div>
<div>
<a class="tooltip-trigger" aria-haspopup="true" title="This is the tooltip text to be displayed">Hover me (bottom)</a>
</div>
<div>
<a class="tooltip-trigger" aria-haspopup="true" title="This is the tooltip text to be displayed">Hover me (left)</a>
</div>
<div>
<a class="tooltip-trigger" aria-haspopup="true">Hover me (HTML content)</a>
</div>
<script>
var docks = ["top", ["right", "left"], "bottom", ["left", "right"], "right"];
var tooltipTriggers = Array.prototype.slice.apply( document.querySelectorAll( ".tooltip-trigger" ) );
tooltipTriggers.forEach( function( element, idx ) {
var dock = docks[idx];
var tooltip;
element.addEventListener( "mouseover", function() {
var options = {
alignTo: element,
dock: dock
};
if ( idx === 4 ) {
options.content = "<span>This text is bold and italic: <b><i>1337</i></b></span>"
}
tooltip = leonardoui.tooltip( options );
} );
element.addEventListener( "mouseout", function() {
if ( tooltip ) {
tooltip.close();
}
} );
} );
</script>
Options
| Option |
Type |
Description |
Default |
| alignTo |
Element / point |
Element or point (Object with top, left) to dock the tooltip to. |
|
| dock |
string | Array |
Dock to side. Can be a string or an array of "top", "right", "bottom", "left". |
"bottom" |
| content |
string | Element |
HTML content as a string or a Element element. If left empty, the title attribute of the alignTo element will be used. |
|
