zarm
Version:
基于 React 的移动端UI库
106 lines (86 loc) • 6.16 kB
Markdown
# Tooltip 工具提示
## 基本用法
```jsx
import { Tooltip, Button, Message } from 'zarm';
import { WarningCircle } from '@zarm-design/icons';
const Demo = () => (
<div className="direction-demo">
<div>
<div style={{ marginLeft: 60 }}>
<Tooltip direction="top-left" content="top-left text">
<Button size="xs">TL</Button>
</Tooltip>
<Tooltip direction="top" content="top text">
<Button size="xs">Top</Button>
</Tooltip>
<Tooltip direction="top-right" content="top-right text">
<Button size="xs">TR</Button>
</Tooltip>
</div>
<div style={{ width: 60, float: 'left', clear: 'both' }}>
<Tooltip direction="left-top" content="left-top text">
<Button size="xs">LT</Button>
</Tooltip>
<Tooltip direction="left" content="left text">
<Button size="xs">Left</Button>
</Tooltip>
<Tooltip direction="left-bottom" content="left-bottom text">
<Button size="xs">LB</Button>
</Tooltip>
</div>
<div style={{ width: 60, marginLeft: 60 * 4 + 20 }}>
<Tooltip direction="right-top" content="right-top text">
<Button size="xs">RT</Button>
</Tooltip>
<Tooltip direction="right" content="right text">
<Button size="xs">Right</Button>
</Tooltip>
<Tooltip direction="right-bottom" content="righ-bottom text">
<Button size="xs">RB</Button>
</Tooltip>
</div>
<div style={{ marginLeft: 60, clear: 'both' }}>
<Tooltip direction="bottom-left" content="bottom-left text">
<Button size="xs">BL</Button>
</Tooltip>
<Tooltip direction="bottom" content="bottom text">
<Button size="xs">Bottom</Button>
</Tooltip>
<Tooltip direction="bottom-right" content="bottom-right text">
<Button size="xs">BR</Button>
</Tooltip>
</div>
<Message theme="warning" icon={<WarningCircle />}>
左右两侧显示位置不足会自动调整为反向显示
</Message>
</div>
</div>
);
ReactDOM.render(<Demo />, mountNode);
```
## API
| 属性 | 类型 | 默认值 | 说明 |
| :----------------- | :------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| visible | boolean | false | 是否显示 |
| content | ReactNode | - | 显示内容 |
| hasArrow | boolean | false | 是否带有箭头 |
| arrowPointAtCenter | boolean | false | 箭头是否指向目标元素中心 |
| className | string | - | 气泡层类名追加 |
| mouseEnterDelay | number | 100 | 鼠标移入后延时多少才显示气泡层，单位：毫秒 |
| mouseLeaveDelay | number | 100 | 鼠标移出后延时多少才隐藏气泡层，单位：毫秒 |
| direction | string | 'top' | 显示方向，可选值 `top-left`、`top`、`top-right`、`right-top`、`right`、`right-bottom`、`botto-left`、`bottom`、`bottom-right`、`left-top`、`left`、`left-bottom` |
| trigger | string | 'click' | 触发方式，PC 端默认值为 'hover', 可选值为：点击触发`click`、鼠标经过触发`hover`、聚焦状态触发`focus`、受控触发`manual`、右键触发`contextMenu` |
| onVisibleChange | (visible: boolean) => void | noop | 显示/隐藏触发的事件 |
## CSS 变量
| 属性 | 默认值 | 说明 |
| :------------------------ | :--------------------------- | :--------------------- |
| --font-size | '12px' | 字体大小 |
| --color | var(--za-color-text-inverse) | 字体颜色 |
| --background | 'rgba(0, 0, 0, 0.8)' | 背景色 |
| --zindex | '1700' | 层级 |
| --spacing | '3px' | 和目标元素的间距 |
| --padding-horizontal | var(--za-padding-h-xs) | 横向边距 |
| --padding-vertical | var(--za-padding-v-xs) | 垂直边距 |
| --arrow-size | '4px' | 箭头大小 |
| --arrow-horizontal-offset | '10px' | 箭头相对内容的横向偏移 |
| --arrow-vertical-offset | '6px' | 箭头相对内容的纵向偏移 |