Tooltips

Standard Tooltips

Steps:

1. The element to trigger a tooltip must always be an anchor. Give it the tooltip-link class.
2. If the target is text (as opposed to the info icon), add a second class of hoverdotted.
3. Give the div that will contain the tooltip content a tooltip-content class.
4. By default, the tooltip will be positioned to the right of the tooltip-link. However, you can force a different position by adding a tooltip-top, tooltip-bottom, or tooltip-left class to tooltip-link.
5. The script will run through every tooltip-link and tooltip-content on the page and assign it a unique, serialized class (i.e. tooltipLinkID-1 and tooltipContentID-1). It will then append the tooltip-content divs to the body. Therefore, it does not matter where in the markup you place the tooltip-content, so long as it is ordered in the same order as its corresponding tooltip-link.
6. For content that is ajaxed in, you can run initTooltips(). Optionally, you can pass a selector: initTooltips($('.some-element')).

<p>This is a <a href="javascript:void(0)" class="tooltip-link hoverdotted">standard tooltip</a>.</p>
<div class="tooltip-content">This is the tooltip content.</div>

<p>This is a <a href="javascript:void(0)" class="tooltip-link tooltip-top hoverdotted">tooltip that is forcing the tooltip 
box to appear on top of the target</a>.</p>
<div class="tooltip-content">This is the tooltip content.</div>

<p>This is a <a href="javascript:void(0)" class="tooltip-link tooltip-bottom hoverdotted">tooltip that is forcing the tooltip 
box to appear below of the target</a>.</p>
<div class="tooltip-content">This is the tooltip content.</div>

<p style="text-align: right;">This is a <a href="javascript:void(0)" class="tooltip-link tooltip-left hoverdotted">tooltip 
that is forcing the tooltip box to appear left of the target</a>.</p>
<div class="tooltip-content">This is the tooltip content.</div>

Dark Tooltip

This version of tooltips is primarily used to display price calculations in enrollment. It is set up to trigger on click, so add click-show to the link.

<p>This is a <a href="javascript:void(0)" class="tooltip-link click-show hoverdotted">dark tooltip</a>.</p>
<div class="tooltip-content dark-tooltip"><p>This is the tooltip content.</p></div>

Mini-Tooltip

The mini-tooltip style is appropriate for toolbars with limited space or if the tooltips to display are only short titles.

<a href="javascript:void(0)" class="tooltip-link tooltip-top">HSA</a>
<div class="tooltip-content mini-tooltip">Health Savings Account Eligible</div>

Info Tooltip

These tooltips are associated with the informational icon.

IMPORTANT: Tooltip must be an anchor with javascript:void(0); in order to be keyboard accessible for AT users. When the user tabs into the tooltip, the content is accessed by pressing keyboard Enter. Do not use  , simply use a space for the anchor content.

<a href="javascript:void(0)" class="tooltip-link info" href="javascript:void(0);"> </a>
<div class="tooltip-content">
  This information is collected to better help us estimate your out-of-pocket costs. 
  Your answer will not affect the premium.
</div>