Tooltips

Basic Tooltips

Tooltips can be added to most elements by adding two attributes tags. Attributes data-tooltip containing the message for the tooltip and data-tooltip-position containing the side the tooltip is displayed on are both required. The value in the data-tooltip can only be text and no extra styling or elements can be added within the tooltip. Hover over each example below to see tooltips:

Tooltip on left.   Tooltip on bottom.   Tooltip on top.   Tooltip on right.

Code Example:

<div 
    data-tooltip-position="bottom" 
    data-tooltip="More text that will display on hover to help explain.">
    Text that is not clear enough on its own and requires some additional explanation that we display when <b>hovering over the text</b>.
    <span class="icon-info-circle" ></span>
</div>
<br /><br />
<div>
    More text that requires some additional explanation that we display only when <b>hovering over the icon</b> to the right which needs to be the html entity version: 
    <span 
        data-tooltip-position="bottom" 
        data-tooltip="More text that will display on hover to help explain.">
        &#xf05a;
    </span>
</div>

Code Preview:

HTML Tooltips

For tooltips that contain HTML elements the following format can be used. The parent container needs the attributes data-tooltip-html and data-tooltip-position. No value needed for the first one. For the tooltip content a child div needs to have the attribute data-tooltip-content and the HTML inside that div will be displayed in the tooltip.

Code Example:

<div data-tooltip-position="right"  data-tooltip-html>
    The content of a tooltip in this form is not limited like the basic one so care must be taken with what is put in the tooltip.
    <span class="icon-info-circle"></span>
    <div data-tooltip-content>
        <p>Even images can be in the tooltips.</p>
        <img src="https://www.digikey.com/-/media/Images/Header/logo_dk.png" />
    </div>
</div>

Code Preview:

Note: tooltips placed on the left or right will not automatically move if displayed off the page.