Tooltip

A Tooltip is a small piece of contextual information about an element on the screen, which is displayed when a user hovers or focuses on the element it is describing. It is not focusable, non-interactive, and cannot contain focusable content.

This is a string of text followed by a tooltip.

The tooltip is created via a custom element, <voy-tooltip>. By default the tooltip is positioned above its indicator. To position the tooltip elsewhere, the attribute tip-position is used. A [role="tooltip"] is required to be accessible for screen readers.

HTML

<voy-tooltip role="tooltip" tip-position="right">A tooltip</voy-tooltip>

Position Variants

To support internationalization (i18n), we encourage tooltips to be placed using logical, instead of physical, directions. While we still support physical directions, they are not the preferred method of placement.

Top Block-start Right Inline-end Bottom Block-end Left Inline-start

JavaScript

To allow browsers that do not support :has() to display the tooltip, a bit of JavaScript is required

JavaScript

                
if (!CSS.supports('selector(:has(*))')) {
    document.querySelectorAll('voy-tooltip').forEach(tooltip =>
        tooltip.parentNode.classList.add('has_tool-tip'))

    let styles = document.createElement('style')
    styles.textContent = `
        .has_tool-tip {
            position: relative;
        }
        .has_tool-tip:is(:hover, :focus-visible, :active) > voy-tooltip {
            opacity: 1;
            transition-delay: 100ms;
        }
    `
    document.head.appendChild(styles)
    }

            

Alternately, instead of including the above script, you may import the Tooltip function.

JavaScript

import './tooltip.js'

Voyager

Tooltip

Position Variants

JavaScript