122 lines
2.6 KiB
Plaintext
122 lines
2.6 KiB
Plaintext
import { Story, ArgsTable, Canvas, Meta, Controls } from "@storybook/blocks";
|
|
import * as stories from "./tooltip.stories.tsx";
|
|
|
|
import { Tooltip } from "./Tooltip";
|
|
|
|
<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.AllTooltip} />
|
|
</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-tooltip-id="tooltipContent"
|
|
data-tooltip-content="You tooltip content"
|
|
data-tooltip-place="top"
|
|
>
|
|
<IconButton isClickable={true} size={20} iconName={QuestionReactSvgUrl} />
|
|
</div>
|
|
<Tooltip
|
|
float
|
|
place="top"
|
|
offset={100}
|
|
maxWidth={320}
|
|
id="tooltipContent"
|
|
getContent={({content}) => <Text fontSize='13px'>{content}</Text>}
|
|
/>
|
|
```
|
|
|
|
### 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-tooltip-id="group" data-tooltip-content={0}>Bob</Link><br />
|
|
<Link data-tooltip-id="group" data-tooltip-content={1}>John</Link><br />
|
|
<Link data-tooltip-id="group" data-tooltip-content={2}>Kevin</Link><br />
|
|
<Link data-tooltip-id="group" data-tooltip-content={3}>Alex</Link><br />
|
|
<Link data-tooltip-id="group" data-tooltip-content={4}>Tomas</Link>
|
|
```
|
|
|
|
```jsx
|
|
<Tooltip
|
|
id="group"
|
|
offsetRight={90}
|
|
getContent={({ content }) =>
|
|
content ? (
|
|
<div>
|
|
<Text isBold={true} fontSize="16px">
|
|
{arrayUsers[content].name}
|
|
</Text>
|
|
<Text color="#A3A9AE" fontSize="13px">
|
|
{arrayUsers[content].email}
|
|
</Text>
|
|
<Text fontSize="13px">{arrayUsers[content].position}</Text>
|
|
</div>
|
|
) : null
|
|
}
|
|
/>
|
|
```
|
|
|
|
### Properties
|
|
|
|
<Controls />
|