Tooltips | Life Time | Core Design Guidelines

A tooltip is a content popup that is triggered by hover, focus or tap (mobile) and contains contextual information abut the item that has focus.

Examples

Tooltips are visible on hover and focus of parent items and provide context for that item when it has focus
In general the use of tooltips should be limited as it‘s preferred to have visible descriptions or intructions
If the tooltip content can be opt-in, consider using a toggletip instead

Tooltips can only be opened by hover or focusing the trigger element
Tooltips are closed with the opposite action defined in the data-trigger
Links and text formatting will not work in the tooltip (links should be avoided anyway because the popup itself is not be focusable)
Tooltips leverage edge detection and will adjust accordingly to the viewport. For example, a tooltip with position set to top may actually appear on the bottom if the top edge will not be visible off the top edge of the viewport, and vice versa.
Only one tooltip can be open at a time

Tooltips use aria-describedby to associate the trigger with the dynamically generated popup

data-tooltip Required	Use on the element that will be trigger the tooltip
title Required	The `title` holds the tooltip content. Without a value the tooltip will not appear. Tooltip triggers added after `Document.ready` should use `data-original-title` instead (a Bootstrap rewrite of that attribute is missed in that circumstance).
data-trigger Modifier	can be `click`, `hover`, `focus` or `manual`. These can be combined with the exception of `manual`. Default is `hover focus`. Note that `click` is not recommended as it is not the best for accessibility. Use the toggletip pattern instead.
data-prevent-default Modifier	Can be `true` or `false` (only `true` triggers the event prevention). Use this to prevent default link behavior, usually when the only purpose of the anchor is to show a tooltip (not recommended for accessibility).
data-modal-tooltip Modifier	Can be `true` or `false`. Add this when using your tooltip in a modal (or any element meant to be above the fixed header). This provides extra z-indexing to position it over the modal.
data-placement Modifier	Can be `top`, `bottom`, `left` and `right`. Default is `top`. If vertical space does not allow for the placement, it will flip on the associated axis automatically. It is not recommended to use `left` or `right` as they will position over the triggers in small viewports.