123 lines
2.5 KiB
Plaintext
123 lines
2.5 KiB
Plaintext
import { Story, ArgsTable, Canvas, Meta, Controls } from "@storybook/blocks";
|
|
import * as stories from "./tooltip.stories.js";
|
|
|
|
import Tooltip from "./";
|
|
|
|
<Meta
|
|
title="Components/Tooltip"
|
|
component={Tooltip}
|
|
parameters={{
|
|
source: {
|
|
code: stories.basic,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
# Tooltip
|
|
|
|
Custom tooltip
|
|
|
|
#### See documentation: https://github.com/wwayne/react-tooltip
|
|
|
|
<Canvas>
|
|
<Story of={stories.all} />
|
|
</Canvas>
|
|
|
|
### Usage with IconButton
|
|
|
|
```js
|
|
import Tooltip from "@docspace/components/tooltip";
|
|
import IconButton from "@docspace/components/icon-button";
|
|
import Text from "@docspace/components/text";
|
|
import QuestionReactSvgUrl from 'PUBLIC_DIR/images/question.react.svg?url";
|
|
```
|
|
|
|
```jsx
|
|
<div
|
|
style={BodyStyle}
|
|
data-for="tooltipContent"
|
|
data-tip="You tooltip content"
|
|
data-event="click focus"
|
|
data-offset="{'top': 100, 'right': 100}"
|
|
data-place="top"
|
|
>
|
|
<IconButton isClickable={true} size={20} iconName={QuestionReactSvgUrl} />
|
|
</div>
|
|
<Tooltip
|
|
id="tooltipContent"
|
|
getContent={dataTip => <Text fontSize='13px'>{dataTip}</Text>}
|
|
effect="float"
|
|
place="top"
|
|
maxWidth={320}
|
|
/>
|
|
```
|
|
|
|
### Usage with array
|
|
|
|
```js
|
|
import { Tooltip, Link, Text } from "@docspace/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
|
|
<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>
|
|
```
|
|
|
|
```jsx
|
|
<Tooltip
|
|
id="group"
|
|
offsetRight={90}
|
|
getContent={(dataTip) =>
|
|
dataTip ? (
|
|
<div>
|
|
<Text isBold={true} fontSize="16px">
|
|
{arrayUsers[dataTip].name}
|
|
</Text>
|
|
<Text color="#A3A9AE" fontSize="13px">
|
|
{arrayUsers[dataTip].email}
|
|
</Text>
|
|
<Text fontSize="13px">{arrayUsers[dataTip].position}</Text>
|
|
</div>
|
|
) : null
|
|
}
|
|
/>
|
|
```
|
|
|
|
### Properties
|
|
|
|
<Controls />
|