# UTooltip 工具提示 - [示例](#示例) - [基本用法](#基本用法) - [触发方式](#触发方式) - [弹出方位](#弹出方位) - [禁用状态](#禁用状态) - [设置尺寸](#设置尺寸) - [API]() - [Props/Attrs](#propsattrs) - [Slots](#slots) - [Events](#events) - [Methods](#methods) **Feedback** 工具提示 ## 示例 ### 基本用法 将需要弹出的内容用``包裹起来，并插入到触发事件的元素中。 也可以直接使用指令的方式。 ``` html 直接插入 直接插入文本或HTML 指令 ``` ### 触发方式 使用`trigger`属性设置触发方式。 ``` html hover（默认） Tooltip click Tooltip right-click Tooltip double-click Tooltip ``` #### 指令形式 ``` html hover（默认） click right-click double-click ``` #### 手动触发 也可以手动触发工具提示的弹出/关闭： ``` vue ``` ### 弹出方位 使用`placement`属性控制弹出方位。 ``` html 上左 Tooltip 上边 Tooltip 上右 Tooltip 左上 Tooltip 左边 Tooltip 左下 Tooltip 右上 Tooltip 右边 Tooltip 右下 Tooltip 下左 这是下左的Tooltip这是下左的Tooltip 下边 Tooltip 下右 Tooltip ``` #### 指令形式 ``` html 上左 上边 上右 左上 左边 左下 右上 右边 右下 下左 下边 下右 ``` #### 跟随鼠标 开启`follow-cursor`属性可以让弹出层跟随鼠标。也可以传一个数字或对象调整位置偏移。 ``` html 上左 Tooltip 上边 Tooltip 上右 Tooltip 左上 Tooltip 左边 Tooltip 左下 Tooltip 右上 Tooltip 右边 Tooltip 右下 Tooltip 下左 Tooltip 下边 Tooltip 下右 Tooltip ``` #### 显隐延时 使用`hover-delay`属性和`hide-delay`属性控制显隐的延时。 ``` html Hover Delay Tooltip ``` ### 禁用状态 给工具提示添加`disabled`属性可以禁止弹出效果，但需要手动设置外层元素的状态。 ``` html disabled disabled ``` ### 设置尺寸 ``` vue ``` #### 指令形式 ``` vue ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | opened.sync | boolean | | `false` | 弹出/关闭状态 | | trigger | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'hover'` | 工具提示的触发方式 | | placement | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'bottom'` | 工具提示的弹出方向 | | hide-delay | number | | `200` | 提示内容消失延迟时间，单位是 ms | | offset | string | | `'0'` | 弹出层偏移，如：'10', '10px 10px', '10% 10%', 第一个值表示水平偏移，第二个值表示垂直位移, 默认单位是`px` | | follow-cursor | boolean, number, object | | `false` | 是否跟随鼠标 | | disabled | boolean | | `false` | 是否禁用 | | size | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'normal'` | 大小扩展，支持一个值或两个值的组合，前者表示高度，后者表示宽度 | ### Slots #### (default) 插入需要弹出的内容。 #### popper 自定义整个弹出层。 #### body 自定义滚动区域。 #### content 自定义内容文本。 ### Events #### @before-open 弹出前触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.preventDefault | Function | 阻止弹出流程 | | senderVM | UTooltip | 发送事件实例 | #### @open 弹出时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | | 空 | | senderVM | UTooltip | 发送事件实例 | #### @before-close 隐藏前触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.preventDefault | Function | 阻止隐藏流程 | | senderVM | UTooltip | 发送事件实例 | #### @close 隐藏时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | | 空 | | senderVM | UTooltip | 发送事件实例 | #### @before-toggle @deprecated | Param | Type | Description | | ----- | ---- | ----------- | #### @toggle @deprecated | Param | Type | Description | | ----- | ---- | ----------- | Methods #### open() 弹出实例。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### close() 关闭实例。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### toggle(opened?) 切换弹出/关闭状态。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | | opened? | boolean | | 可选。弹出/关闭状态 | #### update() 更新 popper 实例。参考 [Popper.update()](https://popper.js.org/popper-documentation.html#Popper.update)。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### scheduleUpdate() 在下次 UI 渲染时一块更新 popper 实例，比`update()`性能要好。参考 [Popper.scheduleUpdate()](https://popper.js.org/popper-documentation.html#Popper.scheduleUpdate)。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- |