import { Story, ArgsTable, Canvas, Meta } from "@storybook/addon-docs/blocks";
import * as stories from "./tooltip.stories.js";
import Tooltip from "./";
# Tooltip
Custom tooltip
#### See documentation: https://github.com/wwayne/react-tooltip
### Usage with IconButton
```js
import Tooltip from "@appserver/components/tooltip";
import IconButton from "@appserver/components/icon-button";
import Text from "@appserver/components/text";
```
```jsx
{dataTip} }
effect="float"
place="top"
maxWidth={320}
/>
```
### Usage with array
```js
import { Tooltip, Link, Text } from "@appserver/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
dataTip ? (
{arrayUsers[dataTip].name}
{arrayUsers[dataTip].email}
{arrayUsers[dataTip].position}
) : null
}
/>
```
### YouComponent Properties
| Props | Type | Required | Values | Default | Description |
| ------------- | :------: | :------: | :------------------------------: | :-----: | --------------------------------- |
| `data-event` | `string` | - | `click, focus` | - | Custom event to trigger tooltip |
| `data-for` | `string` | ✅ | - | - | Corresponds to the id of Tooltip |
| `data-offset` | `string` | - | `top`, `left`, `right`, `bottom` | - | Offset of current tooltip |
| `data-place` | `string` | - | `top`, `right`, `bottom`, `left` | - | Tooltip placement |
| `data-tip` | `string` | - | - | - | Required if you need to component |