Tooltip

Hjälptext

Storybook

React Aria

Komponent som användas för att visa kort, temporär och icke-essentiell information när användaren hovrar över eller fokuserar på ett element.

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

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

Hovra över ikonen för att visa tooltip

Användning

Typiska användningsområden för Tooltip är för att förklara ikoner, för att visa kortkommandon eller för att beskriva en term. Tooltips ska inte användas för att visa information som användaren behöver för att kunna använda en komponent eller slutföra en uppgift. Om det finns mer information att visa än vad som ryms i en Tooltip, om det behövs interaktiva element eller om informationen är viktig för användaren används Popover.

Använd Tooltip för:

• Kort, stödjande information som är extra och inte nödvändig för att förstå eller slutföra en uppgift.

Använd inte Tooltip för:

• Viktig information, felmeddelanden eller instruktioner som användaren måste se för att kunna fortsätta.

Riktlinjer

• Håll texten kort och konkret
• Se till att tooltipen beskriver samma sak som triggern visar.
• Lägg inte längre text i en Tooltip än vad som är lätt att läsa på en gång.
• Använd inte Tooltip som enda sätt att göra en funktion synlig eller förståelig

Implementation

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>

Placering

Placering av Tooltip 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.

API

Tooltip

Name	Type	Default	Description
className	ClassNameOrFunction<TooltipRenderProps>	'react-aria-Tooltip'	The CSS className for the element. A function may be provided to compute the class based on component state.
triggerRef	RefObject<Element | null>	-	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. @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.
placement	Placement	'top'	The placement of the tooltip with respect to the trigger.
containerPadding	number	12	The placement padding that should be applied between the element and its surrounding container.
offset	number	0	The additional offset applied along the main axis between the element and its anchor element.
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.
isOpen	boolean	-	Whether the element is rendered.
arrowBoundaryOffset	number	0	The minimum distance the arrow's edge should be from the edge of the overlay element.
defaultOpen	boolean	-	Whether the overlay is open by default (uncontrolled).
children	ChildrenOrFunction<TooltipRenderProps>	-	The children of the component. A function may be provided to alter the children based on component state.
style	StyleOrFunction<TooltipRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"div", TooltipRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

TooltipTrigger