Tooltip 文字提示
代码演示
WARNING
使用tooltip时, 一定要为触发元素设置 slot="reference", 否则无法生效。
TS
Top
TE
LS
Left
LE
RS
Right
RE
BS
Bottom
BE
基础用法
改变tooltip组件的 placement 属性, 可以定义气泡出现的位置, 默认值为 bottom-start, 你还可以设置 top、 left right bottom 及其后缀 -start -end。
查看代码 < />
<template>
<div class="demo-wrapper">
<div class="top">
<w-tooltip content="top-start" placement="top-start">
<span class="tooltip-reference" slot="reference">TS</span>
</w-tooltip>
<w-tooltip content="top" placement="top">
<span class="tooltip-reference" slot="reference">Top</span>
</w-tooltip>
<w-tooltip content="top-end" placement="top-end">
<span class="tooltip-reference" slot="reference">TE</span>
</w-tooltip>
</div>
<div class="col-wrapper">
<div class="left">
<w-tooltip content="left-start" placement="left-start">
<span class="tooltip-reference" slot="reference">LS</span>
</w-tooltip>
<w-tooltip content="left" placement="left">
<span class="tooltip-reference" slot="reference">Left</span>
</w-tooltip>
<w-tooltip content="left-end" placement="left-end">
<span class="tooltip-reference" slot="reference">LE</span>
</w-tooltip>
</div>
<div class="right">
<w-tooltip content="right-start" placement="right-start">
<span class="tooltip-reference" slot="reference">RS</span>
</w-tooltip>
<w-tooltip content="right" placement="right">
<span class="tooltip-reference" slot="reference">Right</span>
</w-tooltip>
<w-tooltip content="right-end" placement="right-end">
<span class="tooltip-reference" slot="reference">RE</span>
</w-tooltip>
</div>
</div>
<div class="bottom">
<w-tooltip content="bottom-start" placement="bottom-start">
<span class="tooltip-reference" slot="reference">BS</span>
</w-tooltip>
<w-tooltip content="bottom" placement="bottom">
<span class="tooltip-reference" slot="reference">Bottom</span>
</w-tooltip>
<w-tooltip content="bottom-end" placement="bottom-end">
<span class="tooltip-reference" slot="reference">BE</span>
</w-tooltip>
</div>
</div>
</template> light
dark
风格选择
tooltip 默认风格是 light, 设置 theme=“dark” 即可设置为黑色风格。
查看代码 < />
<template>
<w-tooltip width="60px" content="light theme" placement="top-start">
<span class="tooltip-reference" slot="reference">light</span>
</w-tooltip>
<w-tooltip content="dark theme" theme="dark">
<span class="tooltip-reference" slot="reference">dark</span>
</w-tooltip>
</template>API
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| content | 显示的内容 | String | — | — | |
| disabled | 是否禁用Popover | Boolean | — | false | |
| popper-class | 为 popper 添加类名 | String | — | — | |
| placement | 出现位置 | String | top/right/bottom/left 及各方向的修饰符(-start, -end) | bottom-start | |
| theme | 气泡风格 | String | — | light | |
| visible-arrow | 是否显示popover的箭头 | Boolean | — | true | |
| width | 气泡的宽度(普通width属性的合法值) | String | — | — | v1.7.7 |
| max-width | 气泡的最大宽度(普通max-width属性的合法值) | String | — | — | v1.7.7 |
Slot
| 参数 | 说明 | Version |
|---|---|---|
| reference | tooltip触发dom |
Popper Methods
| 事件名称 | 说明 | 回调参数 | Version |
|---|---|---|---|
| updatePopper | 更新popper（当相对定位元素发生位置或宽高变化时，需要更新popper的位置时调用） | — |
Events
| 事件名称 | 说明 | 回调参数 | Version |
|---|---|---|---|
| hidden | 隐藏时触发 | — | |
| show | 显示时触发 | — |
贡献者
| 类型 | 参与者 |
|---|---|
| 设计者 | UED视觉组 |
| 维护者 | UED前端组 |