2020-08-13 11:47:56 +08:00
|
|
|
# Tooltip <small>浮层提示</small>
|
|
|
|
|
|
|
|
|
|
## 示例
|
|
|
|
|
|
|
|
|
|
### 风格
|
|
|
|
|
|
|
|
|
|
可选的风格 `ui` 属性值：`alt`。
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/tooltip/style.vue" ]]
|
|
|
|
|
|
|
|
|
|
### 定位
|
|
|
|
|
|
|
|
|
|
使用 `position` 属性来指定浮层显示的位置。
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/tooltip/position.vue" ]]
|
|
|
|
|
|
|
|
|
|
### 触发时机
|
|
|
|
|
|
|
|
|
|
使用 `trigger` 属性来指定显示/隐藏浮层的时机。
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/tooltip/trigger.vue" ]]
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
### 属性
|
|
|
|
|
|
|
|
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
|
|
|
|
| -- | -- | -- | -- |
|
|
|
|
|
| `ui` | `string=` | - | [^ui] |
|
|
|
|
|
| `open` | `boolean` | `false` | [^open] |
|
2021-10-18 16:51:32 +08:00
|
|
|
| `target` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 `target` 属性。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
| `position` | `string` | `'top'` | [^position] |
|
2021-10-18 16:51:32 +08:00
|
|
|
| `aim-center` | `boolean` | `false` | 指定浮层提示箭头是否始终指向目标元素中心。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
| `trigger` | `string` | `'hover'` | [^trigger] |
|
|
|
|
|
| `interactive` | `boolean` | `true` | 浮层内容是否允许交互。如果为 `false` 则在 `target` 外满足 `trigger` 指定的条件浮层即自动关闭。 |
|
|
|
|
|
| `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入浮层进行交互前已经自动关闭。 |
|
2021-10-18 16:51:32 +08:00
|
|
|
| `overlay-class` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
|
|
|
|
|
| `overlay-style` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
^^^ui
|
|
|
|
|
预设样式。
|
|
|
|
|
|
|
|
|
|
+++枚举值
|
|
|
|
|
| 值 | 描述 |
|
|
|
|
|
| -- | -- |
|
|
|
|
|
| `reverse` | 反色样式。 |
|
|
|
|
|
| `s` | 小尺寸样式。 |
|
|
|
|
|
| `m` | 中尺寸样式。 |
|
|
|
|
|
+++
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
^^^open
|
|
|
|
|
:::badges
|
|
|
|
|
`.sync`
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
是否显示浮层提示。
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
^^^position
|
|
|
|
|
指定定位参数。使用 [Popper.js](https://popper.js.org/) 风格的定位语法指定，可参考 [`Popper.placements`](https://popper.js.org/popper-documentation.html#Popper.placements)。
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
^^^trigger
|
|
|
|
|
触发浮层提示的方式。支持指定的值为 `v-outside` 指令绑定值的 `trigger` 参数，并支持使用 <code>`${open}-${close}`</code> 语法分别指定触发打开/关闭提示的时机。另外，当 `trigger` 指定为 `custom` 时，将不会使用 `v-outside` 功能自动进行处理。
|
|
|
|
|
|
|
|
|
|
例如：`click` 表示点击 `target` 后打开，在空白处点击时关闭；`hover-mousedown` 表示光标移入 `target` 后打开，在空白处按下鼠标时关闭。
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
### 插槽
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
| -- | -- |
|
|
|
|
|
| `default` | 浮层提示内容。 |
|
|
|
|
|
|
|
|
|
|
### 全局配置
|
|
|
|
|
|
|
|
|
|
| 配置项 | 类型 | 默认值 | 描述 |
|
|
|
|
|
| -- | -- | -- | -- |
|
|
|
|
|
| `tooltip.hideDelay` | `number` | `300` | 见 [`hide-delay` 属性](#属性)。 |
|
