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:
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.">

</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.