#Tooltip

#Description

The Tooltip component is primarily meant to enhance the UX for various and additional information.

#Tooltip accessibility problems

Because a Tooltip is often bound to a hover action, there are cases where you as a developer, together with a UX designer, need to find alternative ways of supporting access to that information.

The Tooltip component is integrated e.g. in the Button component. This way, we can handle the tooltip information to be accessible for screen readers.

#Touch devices and keyboard support

In order to enhance accessibility for these targets, we add a tabindex="0" as well as a touchstart event handler.

#Links (anchor) with target blank

The Eufemia Anchor and Button components do show the Tooltip component when the url target is set to _blank in order to enhance accessibility about the action of opening a new window (out of context).

#Demos

#Button with hover Tooltip

<Button tooltip="Tooltip" text="Hover" />

#Button with active Tooltip

<Button tooltip={<Tooltip active>Tooltip</Tooltip>} text="Active" />

#NumberFormat with a tooltip

<NumberFormat tooltip="Tooltip">1234</NumberFormat>

... or wrapped around the NumberFormat component:

<Tooltip
  targetElement={<NumberFormat>1234</NumberFormat>}
>
  Tooltip
</Tooltip>

#Tooltip with position animation

<Tooltip
  animatePosition
  group="animatePosition"
  hideDelay={1e3}
  size="large"
  targetElement={<Span role="text" right>Top</Span>}
>
  Tooltip 1
</Tooltip>
<Tooltip
  animatePosition
  group="animatePosition"
  position="bottom"
  targetElement={<Span role="text">Bottom</Span>}
>
  Tooltip 2
</Tooltip>

#Tooltip linked to a vanilla button

<button className="target-1">Show the Tooltip</button>
<Tooltip id="unique" active targetSelector=".target-1">Tooltip</Tooltip>