import { Story, ArgsTable, Canvas, Meta, Controls } from "@storybook/blocks";
import * as stories from "./tooltip.stories.tsx";
import { Tooltip } from "./Tooltip";
# Tooltip
Custom tooltip
#### See documentation: https://github.com/wwayne/react-tooltip
### Usage with IconButton
```js
import {Tooltip} , from "@docspace/shared/components/tooltip";
import {IconButton} , from "@docspace/shared/components/icon-button";
import {Text} , from "@docspace/shared/components/text";
import QuestionReactSvgUrl from 'PUBLIC_DIR/images/question.react.svg?url";
```
```jsx
{content}}
/>
```
### Usage with array
```js
import { Tooltip, Link, Text } from "@docspace/shared/components";
```
```js
const arrayUsers = [
{ key: "user_1", name: "Bob", email: "Bob@gmail.com", position: "developer" },
{
key: "user_2",
name: "John",
email: "John@gmail.com",
position: "developer",
},
{
key: "user_3",
name: "Kevin",
email: "Kevin@gmail.com",
position: "developer",
},
{
key: "user_4",
name: "Alex",
email: "Alex@gmail.com",
position: "developer",
},
{
key: "user_5",
name: "Tomas",
email: "Tomas@gmail.com",
position: "developer",
},
];
```
```jsx
Hover group
Bob
John
Kevin
Alex
Tomas
```
```jsx
content ? (
{arrayUsers[content].name}
{arrayUsers[content].email}
{arrayUsers[content].position}
) : null
}
/>
```
### Properties