Tooltips

Tooltips

Provide further feedback for the customer to understand how to use a specific area or element.

Examples

Code
					
<div class="tooltipWrapper">
	<button class="tooltipTrigger alignLeft btnToHyp darkestLink padding10" aria-expanded="false" aria-describedby="colorToolTip">
		<svg height="25px" width="25px" focusable="false" role="img" aria-label="Product Color Tooltip"><title>Product Color Tooltip</title><use xlink:href="#svgIcon-tooltip"></use></svg>
	</button>
	<div role="tooltip" id="colorToolTip" aria-hidden="true">
		<p>Click one of the color choices from the list. Once you're done, scroll down to select the item quantity.</p>
	</div>
</div>
Notes

Tooltip alignment class options: alignLeft | alignMiddle | alignRight

Resources

Sass File(s)/sass/components/_tooltips.scss
JS File(s)/library/tooltips.js
JS FunctionsTooltip Javascript
Locale KeysNone

Accessibility

Update aria-label on SVG.

Update aria-describedby ID.

To Top