2019-10-07 11:39:21 +00:00
|
|
|
# Tooltip
|
|
|
|
|
|
|
|
Custom tooltip
|
|
|
|
|
2019-10-08 12:00:27 +00:00
|
|
|
#### See documentation: https://github.com/wwayne/react-tooltip
|
|
|
|
|
2019-11-21 13:34:17 +00:00
|
|
|
### Usage with IconButton
|
2019-10-07 11:39:21 +00:00
|
|
|
|
|
|
|
```js
|
2021-02-25 21:19:45 +00:00
|
|
|
import Tooltip from "@appserver/components/tooltip";
|
|
|
|
import IconButton from "@appserver/components/icon-button";
|
|
|
|
import Text from "@appserver/components/text";
|
2019-11-21 13:34:17 +00:00
|
|
|
```
|
2019-10-07 11:39:21 +00:00
|
|
|
|
2019-11-21 13:34:17 +00:00
|
|
|
```jsx
|
2019-10-08 08:42:12 +00:00
|
|
|
<div
|
|
|
|
style={BodyStyle}
|
|
|
|
data-for="tooltipContent"
|
|
|
|
data-tip="You tooltip content"
|
|
|
|
data-event="click focus"
|
2019-10-08 12:00:27 +00:00
|
|
|
data-offset="{'top': 100, 'right': 100}"
|
|
|
|
data-place="top"
|
2019-10-08 08:42:12 +00:00
|
|
|
>
|
2021-02-20 08:46:32 +00:00
|
|
|
<IconButton isClickable={true} size={20} iconName="static/images/question.react.svg" />
|
2019-10-08 08:42:12 +00:00
|
|
|
</div>
|
2019-10-07 11:39:21 +00:00
|
|
|
<Tooltip
|
|
|
|
id="tooltipContent"
|
2019-12-10 14:12:38 +00:00
|
|
|
getContent={dataTip => <Text fontSize='13px'>{dataTip}</Text>}
|
2019-10-10 11:46:12 +00:00
|
|
|
effect="float"
|
|
|
|
place="top"
|
|
|
|
maxWidth={320}
|
2019-10-08 08:42:12 +00:00
|
|
|
/>
|
|
|
|
```
|
|
|
|
|
2019-11-21 13:34:17 +00:00
|
|
|
### Usage with array
|
2019-10-08 08:42:12 +00:00
|
|
|
|
|
|
|
```js
|
2020-11-21 13:07:23 +00:00
|
|
|
import { Tooltip, Link, Text } from "@appserver/components";
|
2019-11-21 13:34:17 +00:00
|
|
|
```
|
2019-10-08 08:42:12 +00:00
|
|
|
|
2019-11-21 13:34:17 +00:00
|
|
|
```js
|
2019-10-08 08:42:12 +00:00
|
|
|
const arrayUsers = [
|
|
|
|
{ key: "user_1", name: "Bob", email: "Bob@gmail.com", position: "developer" },
|
2019-11-21 13:34:17 +00:00
|
|
|
{
|
|
|
|
key: "user_2",
|
|
|
|
name: "John",
|
|
|
|
email: "John@gmail.com",
|
2020-10-16 13:16:01 +00:00
|
|
|
position: "developer",
|
2019-11-21 13:34:17 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "user_3",
|
|
|
|
name: "Kevin",
|
|
|
|
email: "Kevin@gmail.com",
|
2020-10-16 13:16:01 +00:00
|
|
|
position: "developer",
|
2019-11-21 13:34:17 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "user_4",
|
|
|
|
name: "Alex",
|
|
|
|
email: "Alex@gmail.com",
|
2020-10-16 13:16:01 +00:00
|
|
|
position: "developer",
|
2019-11-21 13:34:17 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "user_5",
|
|
|
|
name: "Tomas",
|
|
|
|
email: "Tomas@gmail.com",
|
2020-10-16 13:16:01 +00:00
|
|
|
position: "developer",
|
|
|
|
},
|
2019-10-08 08:42:12 +00:00
|
|
|
];
|
2019-11-21 13:34:17 +00:00
|
|
|
```
|
2019-10-08 08:42:12 +00:00
|
|
|
|
2019-11-21 13:34:17 +00:00
|
|
|
```jsx
|
2019-10-08 08:42:12 +00:00
|
|
|
<h5 style={{ marginLeft: -5 }}>Hover group</h5>
|
|
|
|
<Link data-for="group" data-tip={0}>Bob</Link><br />
|
|
|
|
<Link data-for="group" data-tip={1}>John</Link><br />
|
|
|
|
<Link data-for="group" data-tip={2}>Kevin</Link><br />
|
|
|
|
<Link data-for="group" data-tip={3}>Alex</Link><br />
|
|
|
|
<Link data-for="group" data-tip={4}>Tomas</Link>
|
2019-10-07 11:39:21 +00:00
|
|
|
```
|
|
|
|
|
2019-11-21 13:34:17 +00:00
|
|
|
```jsx
|
|
|
|
<Tooltip
|
|
|
|
id="group"
|
|
|
|
offsetRight={90}
|
2020-10-16 13:16:01 +00:00
|
|
|
getContent={(dataTip) =>
|
2019-11-21 13:34:17 +00:00
|
|
|
dataTip ? (
|
|
|
|
<div>
|
2020-10-16 13:16:01 +00:00
|
|
|
<Text isBold={true} fontSize="16px">
|
2019-11-21 13:34:17 +00:00
|
|
|
{arrayUsers[dataTip].name}
|
2019-12-04 09:36:13 +00:00
|
|
|
</Text>
|
2020-10-16 13:16:01 +00:00
|
|
|
<Text color="#A3A9AE" fontSize="13px">
|
2019-11-21 13:34:17 +00:00
|
|
|
{arrayUsers[dataTip].email}
|
2019-12-04 09:36:13 +00:00
|
|
|
</Text>
|
2020-10-16 13:16:01 +00:00
|
|
|
<Text fontSize="13px">{arrayUsers[dataTip].position}</Text>
|
2019-11-21 13:34:17 +00:00
|
|
|
</div>
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
```
|
2019-10-07 11:39:21 +00:00
|
|
|
|
2019-11-21 13:34:17 +00:00
|
|
|
### YouComponent Properties
|
|
|
|
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
| ------------- | :------: | :------: | :------------------------------: | :-----: | --------------------------------- |
|
|
|
|
| `data-event` | `string` | - | `click, focus` | - | Custom event to trigger tooltip |
|
2019-12-03 13:55:43 +00:00
|
|
|
| `data-for` | `string` | ✅ | - | - | Corresponds to the id of Tooltip |
|
2019-11-21 13:34:17 +00:00
|
|
|
| `data-offset` | `string` | - | `top`, `left`, `right`, `bottom` | - | Offset of current tooltip |
|
|
|
|
| `data-place` | `string` | - | `top`, `right`, `bottom`, `left` | - | Tooltip placement |
|
2019-12-03 13:55:43 +00:00
|
|
|
| `data-tip` | `string` | - | - | - | Required if you need to component |
|
2019-11-21 13:34:17 +00:00
|
|
|
|
|
|
|
### ReactTooltip Properties
|
|
|
|
|
2019-12-03 13:55:43 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
| -------------- | :------------: | :------: | :------------------------------: | :-----: | ------------------------------------ |
|
|
|
|
| `className` | `string` | - | - | - | Accepts class |
|
|
|
|
| `effect` | `string` | - | `float`, `solid` | `float` | Behavior of tooltip |
|
|
|
|
| `getContent` | `func` | - | | - | Generate the tip content dynamically |
|
|
|
|
| `id` | `string` | ✅ | - | - | Used as HTML id property |
|
|
|
|
| `maxWidth` | `number` | - | - | `340` | Set max width of tooltip |
|
|
|
|
| `offsetBottom` | `number` | - | - | - | Offset bottom all tooltips on page |
|
|
|
|
| `offsetLeft` | `number` | - | - | - | Offset left all tooltips on page |
|
|
|
|
| `offsetRight` | `number` | - | - | - | Offset right all tooltips on page |
|
|
|
|
| `offsetTop` | `number` | - | - | - | Offset top all tooltips on page |
|
|
|
|
| `place` | `string` | - | `top`, `right`, `bottom`, `left` | `top` | Global tooltip placement |
|
|
|
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|