Components
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.
Code examples
<Tooltip> <TooltipTrigger> <Text width="fit-content"> Hover me! </Text> </TooltipTrigger> <TooltipContent> This is the content of the tooltip </TooltipContent> </Tooltip>
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 |