Components

Tooltip
Storybook

A tooltip is an information box that is displayed when the user interacts with an element, usually by hovering or holding the cursor over it. It provides additional information or relevant context about the element it is associated with.

Imports

1import { Tooltip } from 'dd360-ds'

1import Tooltip from 'dd360-ds/Tooltip'

Usage

To use the Tooltip you must pass 2 props to it in a mandatory way:

content: The content of the tooltip. It can be any React node that you want to show as content of the tooltip.
children: The element/s children of the Tooltip component. These are the elements that will be shown the tooltip when interacting with them.

The code snippet below shows how to use the Tooltip component:

1import { Tooltip } from 'dd360-ds''
2
3<Tooltip content="This is a tooltip">
4  <Button>Hover me</Button>
5</Tooltip>
6

Variant

The prop variant allows specifying the style of the tooltip appearance. It can have two values: "primary" or "secondary". By default, the value is "primary".

1import { Tooltip } from 'dd360-ds'
2
3<Flex alignItems="center" gap="5">
4  <Tooltip content="This is a primary tooltip" variant="primary">
5      <Button>Primary</Button>
6  </Tooltip>
7  <Tooltip content="This is a secondary tooltip" variant="secondary">
8    <Button>Secondary</Button>
9  </Tooltip>
10</Flex>
11
12

Position

The prop position allows you to specify the position of the tooltip in relation to the children. It can have four values: "top", "bottom", "left" and "right". By default, the value is "top".

1import { Tooltip } from 'dd360-ds'
2
3<Flex alignItems="center" gap="2">
4  <Tooltip content="This is a left tooltip" position="left">
5    <Button>Left</Button>
6  </Tooltip>
7  <Tooltip content="This is a top tooltip" position="top">
8    <Button>Top</Button>
9  </Tooltip>
10  <Tooltip content="This is a bottom tooltip" position="bottom">
11    <Button>Bottom</Button>
12  </Tooltip>
13  <Tooltip content="This is a right tooltip" position="right">
14    <Button>Right</Button>
15  </Tooltip>
16</Flex>
17
18

With icon

The Tooltip component allows you to add an icon to the tooltip using the startAdornment and endAdornment properties. You can pass any React element as startAdornment or endAdornment to display it next to the tooltip text.

1import { Tooltip } from 'dd360-ds'
2
3const TwitterIcon = () => {
4 return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      width="20"
9      height="20"
10    >
11      <path fill="none" d="M0 0h24v24H0z" />
12      <path fill="white" d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z" />
13    </svg>
14 )
15}
16
17<Flex alignItems="center" gap="5">
18  <Tooltip content="This is a tooltip with the Twitter icon at the start" startAdornment={<TwitterIcon />}>
19    <Button>With icon at start</Button>
20  </Tooltip>
21  <Tooltip content="This is a tooltip with the Twitter icon at the end" endAdornment={<TwitterIcon />}>
22    <Button>With icon at start</Button>
23  </Tooltip>
24</Flex>
25
26

API Reference

Name	Types	Default
"children"*	ReactElement<any>	-
"content"*	ReactNode	-
"position"	top bottom left right	top
"variant"	primary secondary	primary
"startAdornment"	ReactNode	-
"endAdornment"	ReactNode	-

Note

This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.

TimelineTransition