Tooltip
Tooltips are used to show additional information when hovering an element. OBS! If possible, we recommend using Popover instead of Tooltips, as these are more accessible than tooltips.
Examples
A simple tooltip
<Tooltip> <TooltipTrigger> <Text width="fit-content"> Hover me! </Text> </TooltipTrigger> <TooltipContent> This is the content of the tooltip </TooltipContent> </Tooltip>
Placement of the TooltipContent. Defaults to "bottom"
() => { const positions = ["right-end", "left-start", "top"] return( <Flex gap="3"> {positions.map((p) => <Tooltip positioning={{ placement: p}}> <TooltipTrigger> <Button variant="ghost"> {p} </Button> </TooltipTrigger> <TooltipContent> This is the content of the tooltip </TooltipContent> </Tooltip> )} </Flex> ) }
With arrow
<Tooltip> <TooltipTrigger> <Text width="fit-content"> Hover me! </Text> </TooltipTrigger> <TooltipContent showArrow> This content has an arrow attached to it </TooltipContent> </Tooltip>
Using different components as the Tooltip trigger
<Flex gap="2" direction="column"> <Tooltip> <TooltipTrigger> <Checkbox> Hover me!</Checkbox> </TooltipTrigger> <TooltipContent> This is the content of the tooltip </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger> <Switch label="Switch with label"/> </TooltipTrigger> <TooltipContent> This is the content of the tooltip </TooltipContent> </Tooltip> </Flex>
Guidelines
The Tooltip component should be used to add descriptive information about an interactive element, and should not be used to add additional information to a context (see PopoverEkstern lenke).
The content of a tooltip should only be plain text, and should not contain interactive elements such as buttons or links.
Accessibility
Mobile
Tooltips are activated by focus or hover, and is therefore not well-suited for devices with touchscreen. Please use PopoverEkstern lenkes instead for those cases.
Code
<Tooltip />
import { Tooltip } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | The anchor of the tooltip. Should be something clickable or focusable like a button | |
positioning | "top" | "right-end" | "bottom" | "left-start" | Defaults to "bottom" | |
size | "sm" | "lg" | Defaults to "sm". Use "lg" if you have lots of content. |
<TooltipTrigger />
import { TooltipTrigger } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode |
<TooltipContent />
import { TooltipContent } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | ||
showArrow | boolean | defaults to false |