useTooltip

A fully accessible, semantically correct, and SSR enabled hook for creating a bubble near a focusable target to provide clarifying or auxialry information to the user surrounding the use of that target.

The useTooltip hook is an extension of the useDropdown hook that internally uses the usePopover hook to turn the tooltip target into a Popover. The useDropdown hook enables us to easily position the tooltip around the target element.

Types

There are two kinds of tooltips that each have specific accessibility requirements depending upon how they're used and then impelemneted.

For accessibility purposes, the only node that can launch any kind of tooltip is the <button /> element.

Tooltip

This is the standard tooltip which surfaces a bubble near a actionable element that either labels or describes the action that is associated with it. Since the action is fired using onClick, a tooltip is launched using focus|blur|mouseOver|mouseOut.

This is very helpful when an action is ambiguous and it needs further content to describe or label it.

Eaxmples of this include but aren't limited to:

• Icon only buttons that do something
• Icon only buttons that do something and also display the status of something (i.e. "like" button and count on social media)
• Collapsed navigation buttons
• Dense toolbar buttons that aren't immediately clear of what their pupose is.

You can easily enable this functionality by changing the dxType="tooltip" in the useTooltip hook.

Toggletip

This is a type of tooltip that surfaces a bubble near an actionable element that only reveals information supplementary; it does not have an action associated with it since the toggle tip is launched via onClick. It's basically the same thing as a tooltip however the only function is to provide more information that contexts an adjacent element or concept

This is espcially helpful when you want to click on something and reveal some content instead of hovering/ mousing over the content to view it.

Examples of this include but aren't limited to:

• Information icons near a group of elements to describe a purpose
• Icon inline with a text intput to provide more information about the input's nature or requirements

You can easily enable this functionality by changing the dxType="toggletip" in the useTooltip hook.

Styling

Examples

Barebones

Accessible burst count

Naturally, as with any application, there are instances where actions are going to be ambiguous which thus makes a target ambiguous. Let's take a "like" button for instance shown in the example below.

There is a primary action which associated with smashing that like button, but to screen readers it's not ultimately clear unless we add some more content.

Luckily, we can add another id to the content inside of the button to further context how many likes there are associated with that button. You can see that the dxLabeledBy prop takes in a space delimaited value which tells the screen reader how to interpret the button.

const { targetProps, tooltipProps } = useTooltip({
  id: "likes-label",
  dxType: "label",
  // readers find the ids and then read them sequentually
  dxLabeledBy: "likes-count likes-label",
  dxPosition: "top-center",
  dxArrow: {
    size: 8,
    color: "black",
  },
});