LP6 Style Guide: Tooltips

Tippy.js is a complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.

It's a generic abstraction for the logic and styling of elements that pop out from the flow of the document and float next to a reference element, overlaid on top of the UI.

• Smart: optimized positioning engine for flipping and overflow prevention
• Universal: works with mouse, keyboard, and touch inputs
• Accessible: WAI-ARIA compliant
• Themeable: style via custom CSS, includes extra themes and animations

Here is a quick demo: Our programs are 100% online.

The tippy() constructor (a plain function) creates individual tippy instances. To supply the tooltip content, we use a data attribute: data-tippy-content. This allows us to have multiple tooltips on the page all called with a single tippy constructor:

			
	//Tippy.js Constructor
	$(document).ready(function() {
		tippy('[data-tippy-content]', {
			allowHTML: true,
			interactive: true,
			// to abide by strict WCAG 2.1 rules with `interactive: true` to make it
			// hoverable if it's not actually interactive, but the content will still be
			// announced
			aria: {
				content: 'describedby'
			},
		});
	});
			
		

Tooltips should generally be used in conjunction with Fast Facts to manage their content. This allows global updating of standard tooltip information (see snippet below).

Tooltips should consist of a parent <span> with a nested <span> tag with the attribute tabindex="0". The parent span is necessary for some accessibility features. Note: a <button> can be used in place of the nested <span> but shouldn't be used for long inline text. No tabindex is needed on a button. An optional icon can be part of the tooltip trigger by using a third child <span> that references a fontawesome icon. Or just use a nested SVG icon.

The content of the tooltip is determined by adding a data attribute to the nested span/button: data-tippy-content="" where the value is the contents of the tooltip. We can leverage Fast Facts data to keep tooltip contents always up-to-date by using a Fast Facts array variable to set the value. See the first example below. If a tooltip is truly custom, you can just write in the content. See the second example.

Note: the below snippets are formatted for readability. Remove all spaces, breaks, and tabs within the parent span to avoid extraneous whitespace in rendered text.

PHP

				
	<!-- buttons are ok for short text or block elements -->
	<span class="tooltip-parent">
		<button class="tooltip" data-tippy-content="<?php echo $GLOBALS["fastFactsArray"]["online"]["legal"] ?>">100% online
			<span class="icon-info-sign">
			</span>
		</button>
	</span>

	<!-- spans should be used for long text and other inline elements -->
	<span class="tooltip-parent">
		<span class="tooltip" tabindex="0" data-tippy-content="Our classes are 100% online and we're really cool">100% online
			<span class="icon-info-sign">
			</span>
		</span>
	</span>
				
			

CSS

		
	/* tooltips */
	span.tooltip-parent:hover, span.tooltip-parent:focus, span.tooltip-parent:active {

	}

	.tooltip {
		display: inline;
		position: relative;
		border: none;
		margin: 0;
		padding: 0;
		color: inherit;
		background-color: transparent;
		text-align: inherit;
		min-width: auto;
		text-decoration: underline dotted var(--color-brand-tertiary);
			-webkit-text-decoration-line: underline;
		  -webkit-text-decoration-style: dotted;
		  -webkit-text-decoration-color: var(--color-brand-tertiary);
		text-transform: inherit;
		font-family: inherit;
		font-weight: inherit;
		font-size: inherit;
		line-height: inherit;
	}
	span.tooltip > span, span.tooltip > svg, span.tooltip > sup {
		text-decoration: none;
		display: inline-block;
		margin-left: 5px;
	}
	button.tooltip > span, button.tooltip > svg, button.tooltip > sup {
		text-decoration: none;
		display: inline-block;
		margin-left: 0;
	}
	[id^=tippy] a:link, [id^=tippy] a:visited {
		color: white;
	}
	span [data-tippy-root] {
		/* Chromium tries to display tippy roots as block elements and breaks other inline content to next line despite the absolute positioning. */
		display: inline-block;
		z-index: 100000 !important;
	}
	/* prevent tippy content from inheriting parent text styles */
	.tippy-content {
		text-align: left !important;
		font-family: var(--font-text-regular) !important;
		font-weight: var(--font-text-weight-normal) !important;
		text-transform: none;
		line-height: 1.125;
		padding: 1rem;
	}
				
			

Rendered Examples

100% online

Our classes are 100% online and we're really cool