Tooltip component demo

The title attribute

Tooltips can be attached to almost any element, though the most common are those with a title attribute such as the <abbr> element:

The fundamental languages of the web are HTML, CSS, and JavaScript. These are delivered to browsers using HTTP or HTTPS, the latter of which is preferable because it encrypts data via TLS or the now deprecated SSL.

This component provides a plug-in to automate this, and is enabled by default. To opt out of this behaviour, set titleAttribute: false in your Tippy.js properties.

UX issues and considerations

Buttons and links are another common use for tooltips, but beware that this is not recommended unless special care is taken since touch screens don't usually provide a way for a user to hover over an element before activating it, and so would result in pretty bad UX. For an example, tap the following link on a mobile device (it opens in a new tab) and then hit your back button to return to this page: MDN Web Docs

Here's a button that doesn't do anything when activated:

Inline positioning

Another neat trick Tippy.js can do is to choose the position of the tooltip based on the closest text fragment when text wraps over more than one line via the inlinePositioning property, which we set to true by default. Try hovering over or tapping these pseudo-links at the start or end of a line where they wrap and watch the tooltip appear where it feels most intuitive rather than at the centre of the pseudo-links' bounding boxes . In the unlikely case none of these links wrap to a new line, resize your browser window if you're able to, or rotate your mobile device .

Please see the diagrams in the the Floating UI inline modifier documentation for a visual demonstration of the problem without inlinePositioning enabled.

Animations

This also supports all the optional animations that ship with Tippy.js, and adding new ones is supported as described in the Tippy.js animations documentation.

HTML content

Tippy.js supports HTML content, but it must be explicitly opted in via the the allowHTML property to protect against cross-site scripting (XSS). We provide a plug-in that defines a htmlContentAttribute property; if this property is set to a string, we attempt to retrieve HTML content from an attribute by that name; we then parse it using DOMParser.parseFromString() which will automatically strip any cross-site scripts for us, and we unescape any HTML entities while doing so. Note that this means you should always escape any HTML you place into this attribute - for example using Drupal\Component\Utility\Html::escape() - to ensure it doesn't get parsed incorrectly by browsers.