Tooltip

Example

This is not clear enough

Variants

Basic

white
This is not clear enough

Custom markup in tooltip dialog

white
This is not clear enough

Custom markup in tooltip trigger

white

Props

<Tooltip />

This component does not have any prop types

Conditions for 'isBlockElement' prop application
The
isBlockElement
prop only applies when the children of the
is either a string or multiple elements. They will be wrapped in a span or a div based on the prop value. If there is only one child element, the necessary props will be passed onto it.

JS module reference

All elements with [data-tooltip] attribute will be initialised automatically. Each tooltip requires a trigger element with [aria-describedby=tooltip-id].

Custom initialisation

const myTooltip = new window.myApp.Tooltip(document.getElementById('my-tooltip'), config );

Config

NameDescription.
rootContainerSelector - stringSelector for tooltip container. All tooltip dialogs are moved here on init.
popperOptions - object

Popper.js options object.

Default:
{
placement: 'top',
removeOnDestroy: true,
modifiers: {
  arrow: {
    element: '.tooltip__arrow',
  },
},
}

Methods

NameDescription.
initCreates a new instance
destroyDestroy the instance - removes all listeners, destroys Popper.js instance and removes the dialog element
updateUpdates Popper.js instance
showShows the tooltip dialog
hideHides the tooltip dialog
static getInstance(el: element)Get instance of `Tooltip` attached to specific DOM element (usually `[data-tooltip]`).

Accessibility

The tooltip component is implemented by the incomplete WAI-ARIA authoring practice and Heydon Pickering's tooltip component.

Notes:

  • The tooltip trigger element uses aria-owns attribute to help NVDA speak the description text.
  • In some situations, VoiceOver in Safari might not announce the tooltip tied to spans without a specific role
Lighter

    v1.0.0