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.

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'

Riktlinjer

• I första hand skall knappen vara tydlig 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. Tooltip måste alltid kompletteras med en aria-label eller text som är dold visuellt men läses upp av skärmläsare.
• Tooltips kan också användas för att berätta mer information än vad som framkommer visuellt på knappen.

API

Tooltip

Namn	Typ	Standard	Beskrivning
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](https://developer.mozilla.org/en-US/docs/Web/API/Element/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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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