Tooltip component
npm install @uiw/react-tooltipTooltip 文字提示
===
简单的文字提示气泡框。
``jsx`
import { Tooltip } from 'uiw';
// or
import Tooltip from '@uiw/react-tooltip';
最简单的用法。
`jsx mdx:preview&bg=#fff
import React from 'react';
import { Tooltip, Button } from 'uiw';
const Demo = () => (
$3
位置有
个方向，根据 placement 参数来设置。`jsx mdx:preview&bg=#fff
import React from 'react';
import { Tooltip, Button, Divider } from 'uiw';const btnStl = {position: 'relative', width: 70 }
const Demo = () => (
Hello uiw!}>
Hello uiw!}>
Hello uiw!}>
Hello uiw!}>
Hello uiw!}>
Hello uiw!}>
Hello uiw!}>
Hello uiw! 位置有 12 个方向，根据 placement 参数来设置。}>
Hello uiw! 位置有 12 个方向，根据 placement 参数来设置。}>
Hello uiw! 位置有 12 个方向，根据 placement 参数来设置。}>
Hello uiw! 位置有 12 个方向，根据 placement 参数来设置。}>
Hello uiw! 位置有 12 个方向，根据 placement 参数来设置。}>
Hello uiw! 位置有 12 个方向，根据 placement 参数来设置。}>
Hello uiw! 位置有 12 个方向，根据 placement 参数来设置。}>
Hello uiw! 位置有 12 个方向，根据 placement 参数来设置。}>
Hello uiw! 位置有 12 个方向，根据 placement 参数来设置。}>
)
export default Demo;
`$3
文字提示组件
，通过设置属性 trigger 可以文字提示操作方式。`jsx mdx:preview&bg=#fff
import React from 'react';
import { Tooltip, Button } from 'uiw';const Demo = () => (
)
export default Demo;
`$3
通过设置属性
可以文字提示框不显示箭头。`jsx mdx:preview&bg=#fff
import React from 'react';
import { Tooltip, Button } from 'uiw';const Demo = () => (
)
export default Demo;
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Tooltip, Switch, Divider } from 'uiw';class Demo extends React.Component {
constructor() {
super()
this.state = {
isOpen: false,
}
}
onChange(e) {
this.setState({ isOpen: e.target.checked });
}
onVisibleChange(isOpen) {
this.setState({ isOpen });
}
render() {
return (
onVisibleChange={this.onVisibleChange.bind(this)}
placement="top"
content="Hello uiw!"
>
鼠标移动到此处，显示和消失触发事件，也可以通过 Switch 组件来控制
)
}
}
export default Demo;
`
Props
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| content | 显示的内容 | String,React.ReactNode | - |
| placement | 气泡框位置，可现实箭头在不通的方位 | Enum{
, topLeft, topRight,
left, leftTop, leftBottom,
right, rightTop, rightBottom,
bottom, bottomLeft, bottomRight} | top |
| visibleArrow | 是否显示 Tooltip 箭头 | Boolean | true |
| delay | 延迟进入和消失，{ show: 2000, hide: 4000 } 或者直接设置 2000，只对 trigger=hover 有效，继承 组件属性 | Object/Number | - |
| trigger | 悬停/点击弹出窗口，继承 组件属性 | Enum{hover, click} | hover |
| disabled | 是否禁用弹出目标 | Boolean | false |
| isOpen | 默认是否显示弹窗，继承 组件属性 | Boolean | false |
| autoAdjustOverflow | 弹出层被遮挡时自动调整位置，继承 组件属性 | Boolean | false |
| onVisibleChange | 显示隐藏的回调，继承 更多属性请参考 OverlayTrigger。