Tooltip

Hjälptext

Storybook

React Aria

Tooltip kan användas för att förklara en knapp eller annan interaktion när det inte går att få plats med informationen i knappen.

<TooltipTrigger isOpen>
  <Button
    variant='tertiary'
    aria-label='Spara'
  >
    <Save />
  </Button>
  <Tooltip>Spara</Tooltip>
</TooltipTrigger>

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { Tooltip, TooltipTrigger, Button } from '@midas-ds/components'

Funktioner

Tooltip är byggd på React Aria Tooltip och med det följer inbyggd tillgänglighet som till exempel sammankoppling mellan trigger och tooltip. För mer detaljerad dokumentation hänvisas till React Aria.

Delay

Tooltips visas efter en kort fördröjning (via prop delay) när man håller muspekaren över utlösaren, eller omedelbart vid användning av tangentbordsfokus. Denna fördröjning kallas för "uppvärmningsperiod" (warmup period), och det är en global timer som delas av alla Tooltip. När ett Tooltip väl har visats, visas andra Tooltips omedelbart. Om användaren väntar under "nedkylningsperioden" (cooldown period) innan de för muspekaren över ett annat element, startar uppvärmningstimern om.

<TooltipTrigger delay={600}>
  <Button variant='secondary'>Hover me first</Button>
  <Tooltip>Första Tooltip som hovras visas efter fördröjning.</Tooltip>
</TooltipTrigger>
<TooltipTrigger>
  <Button variant='primary'>Hover later</Button>
  <Tooltip>Och nästa Tooltip visas då snabbare!</Tooltip>
</TooltipTrigger>

Placement

Tooltipens placering i förhållande till dess trigger-element kan justeras med placement (i mån av plats).

<TooltipTrigger delay={600}>
  <Button>
    <ArrowLeft />
  </Button>
  <Tooltip placement='left'>
  Tooltip visas till vänster om trigger-elementet
  </Tooltip>
</TooltipTrigger>
<TooltipTrigger delay={600}>
  <Button>
  <ArrowUp />
  </Button>
  <Tooltip placement='top'>
  Tooltip visas på ovansidan av trigger-elementet
</Tooltip></TooltipTrigger>

Controlled state

export const ControlledTooltip = () => {
  const [isOpen, setOpen] = React.useState(false)
  return (
    <>
      <TooltipTrigger
        isOpen={isOpen}
        onOpenChange={setOpen}
        delay={500}
      >
        <Button>Hover me</Button>
        <Tooltip>Message</Tooltip>
      </TooltipTrigger>
      <pre>Tooltip {isOpen ? 'visas' : 'visas inte'}</pre>
    </>
  )
}

Tooltip visas inte

Valfritt element som Trigger

TooltipTrigger fungerar direkt med alla focusable React Aria-komponenter (t.ex. Button, Link, etc.). Anpassade trigger-element, såsom tredjepartskomponenter och andra DOM-element, stöds också genom att de omsluts med <Focusable>-komponenten.

import { Focusable } from 'react-aria-components'
<TooltipTrigger>
  <Focusable>
    <span role='button'>Trigger</span>
  </Focusable>
  <Tooltip>
  Med hjälp av Focusable kan vilket
  element som helst bli en trigger!
  </Tooltip>
</TooltipTrigger>

Trigger

Observera att element under <Focusable> måste ha en ARIA-roll eller använda ett lämpligt semantiskt HTML-element så att skärmläsare kan läsa upp innehållet i verktygstipset. Detta gäller bara element som inte redan är focusable eller pressable. Se React Aria Tooltip Custom trigger för referens.

Riktlinjer

• I första hand skall elementet vara tydligt nog så användaren förstår innebörden. Tooltip är till för en design där detta inte är möjligt och vi måste gömma undan informationen.
• Tooltips kan också användas för att berätta mer information än vad som framkommer visuellt på knappen.

API

Tooltip

Name	Type	Default	Description
placement	"left" | "right" | "top" | "bottom"	-	The placement of the tooltip with respect to the trigger.
className	string | ((values: TooltipRenderProps & { defaultClassName: string; }) => string)	-	The CSS className for the element. A function may be provided to compute the class based on component state.
style	CSSProperties | ((values: TooltipRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)	-	The inline style for the element. A function may be provided to compute the style based on component state.
isOpen	boolean	-	Whether the element is rendered.
defaultOpen	boolean	-	Whether the overlay is open by default (uncontrolled).
offset	number	0	The additional offset applied along the main axis between the element and its anchor element.
arrowBoundaryOffset	number	0	The minimum distance the arrow's edge should be from the edge of the overlay element.
triggerRef	RefObject<Element>	-	The ref for the element which the tooltip positions itself with respect to. When used within a TooltipTrigger this is set automatically. It is only required when used standalone.
isEntering	boolean	-	Whether the tooltip is currently performing an entry animation.
isExiting	boolean	-	Whether the tooltip is currently performing an exit animation.
UNSTABLE_portalContainer	Element	document.body	The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.
containerPadding	number	12	The placement padding that should be applied between the element and its surrounding container.
crossOffset	number	0	The additional offset applied along the cross axis between the element and its anchor element.
shouldFlip	boolean	true	Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.

TooltipTrigger

Name	Type	Default	Description
isDisabled	boolean	-	Whether the tooltip should be disabled, independent from the trigger.
delay	number	0	The delay time for the tooltip to show up. See guidelines.
closeDelay	number	500	The delay time for the tooltip to close. See guidelines.
trigger	"focus"	-	By default, opens for both focus and hover. Can be made to open only for focus.
isOpen	boolean	-	Whether the overlay is open by default (controlled).
defaultOpen	boolean	-	Whether the overlay is open by default (uncontrolled).