Skip to main content

Tooltips

Supported products
  • Central CMS
  • Central Forms
  • Central Connect

Add floating labels that appear on hover or focus to provide supplemental or descriptive information.

Apply a Tooltip to an element by adding data-tippy-content="your tooltip text". Tooltips should only be added to elements that can gain focus (buttons, links and form controls).

info

These new WCAG 2.1 compliant tooltips were introduced in Pulsar 11. Details on the previous version which did not meet WCAG 2.1 are available on request.

Hover over me

Basic usage​

{{
  html.link({
    'href': '#myLink',
    'label': 'Hover over me',
    'data-tippy-content': 'A wild tooltip appears!'
  })
}}

Helper options​

You can configure this helper using the common helper options, the following options are specific to this helper.

OptionTypeDefaultDescription
data-tippy-allowHTMLbooleanfalseParse the tooltip content as HTML instead of plain text. Avoid doing this if your tooltip may contain user-supplied content as this could be used to create an XSS security vulnerability
data-tippy-appendTostringbodyAppends the popover to a specific element. Example: body. By default, tooltips are appended to the body element to prevent overflow issues
data-tippy-placementstringtopWhere to place the popover, can be top, bottom, left, right. If a Tooltip cannot fit within its desired placement, it will instead display in the opposite position if there is not enough space

As Tooltips use the Tippy.js library, additional configuration options can be found in the Tippy.js documentation though these should generally not be needed. If other options not listed above are used, care should be taken to ensure none of the default Pulsar options that help Tooltips meet WCAG 2.1 are overridden (such as the interactive option).

Placement​

By default Tooltips display above the triggering element. If there isn't enough space, it will instead display in the opposite position (below the triggering element). You can change the default placement by using the data-tippy-placement attribute. Choose the most appropriate placement to fit your UI, try to avoid the tooltip from obscuring important things when it appears.

     

Tooltips on disabled elements​

If an element is disabled, you will need to use a wrapper element (<span> or <div>) made focuseable with tabindex="0", and attach the tooltip to that element. Elements with the disabled attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a Tooltip.

danger

The tooltip will not be read by screenreaders and therefore this pattern should be avoided.

<div data-tippy-content="Can’t touch this" tabindex="0" class="u-display-inline-block">
  {{ 
    html.button({
      "label": "Disabled Button",
      "disabled": true
    })
  }}
</div>

Accessibility​

Tooltips should only be applied to natively focusable elements. Although you can make any element focusable with the tabindex="0" attribute this would add potentially confusing tab stops on non-interactive elements for keyboard users and is not recommended (the exception to this is for wrappers around disabled elements, which mimics the previously available keyboard focus on disabled elements).

Tooltips generated using the methods detailed above meet the requirements of WCAG 2.1 1.4.13: Content on Hover or Focus, namely:

Dismissible
Tooltips can be dismissed with the ESC key
Hoverable
Tooltip content can be hovered without the tooltip disappearing
Persistent
Tooltips are shown until the hover or focus trigger is removed or the user dismisses it with the ESC key