Tooltip 文字提示

概述

文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示。

代码示例

Tooltip 文字提示 - 图1

基础用法

最简单的用法。

注意 Tooltip 内的文本使用了 white-space: nowrap;,即不自动换行,如需展示很多内容并自动换行时,建议给内容 slot 增加样式 white-space: normal;

  1. <template>
  2. <Tooltip content="Here is the prompt text">
  3. A balloon appears when the mouse passes over this text
  4. </Tooltip>
  5. </template>
  6. <script>
  7. export default {
  8. }
  9. </script>

Tooltip 文字提示 - 图2

位置

组件提供了12个不同的方向显示Tooltip,具体配置可查看API。

  1. <style scoped>
  2. .top,.bottom{
  3. text-align: center;
  4. }
  5. .center{
  6. width: 300px;
  7. margin: 10px auto;
  8. overflow: hidden;
  9. }
  10. .center-left{
  11. float: left;
  12. }
  13. .center-right{
  14. float: right;
  15. }
  16. </style>
  17. <template>
  18. <div class="top">
  19. <Tooltip content="Top Left text" placement="top-start">
  20. <Button>Top Left</Button>
  21. </Tooltip>
  22. <Tooltip content="Top Center text" placement="top">
  23. <Button>Top Center</Button>
  24. </Tooltip>
  25. <Tooltip content="Top Right text" placement="top-end">
  26. <Button>Top Right</Button>
  27. </Tooltip>
  28. </div>
  29. <div class="center">
  30. <div class="center-left">
  31. <Tooltip content="Left Top text" placement="left-start">
  32. <Button>Left Top</Button>
  33. </Tooltip><br><br>
  34. <Tooltip content="Left Center text" placement="left">
  35. <Button>Left Center</Button>
  36. </Tooltip><br><br>
  37. <Tooltip content="Left Bottom text" placement="left-end">
  38. <Button>Left Bottom</Button>
  39. </Tooltip>
  40. </div>
  41. <div class="center-right">
  42. <Tooltip content="Right Top text" placement="right-start">
  43. <Button>Right Top</Button>
  44. </Tooltip><br><br>
  45. <Tooltip content="Right Center text" placement="right">
  46. <Button>Right Center</Button>
  47. </Tooltip><br><br>
  48. <Tooltip content="Right Bottom text" placement="right-end">
  49. <Button>Right Bottom</Button>
  50. </Tooltip>
  51. </div>
  52. </div>
  53. <div class="bottom">
  54. <Tooltip content="Bottom Left text" placement="bottom-start">
  55. <Button>Bottom Left</Button>
  56. </Tooltip>
  57. <Tooltip content="Bottom Center text" placement="bottom">
  58. <Button>Bottom Center</Button>
  59. </Tooltip>
  60. <Tooltip content="Bottom Right text" placement="bottom-end">
  61. <Button>Bottom Right</Button>
  62. </Tooltip>
  63. </div>
  64. </template>
  65. <script>
  66. export default {
  67. }
  68. </script>

Tooltip 文字提示 - 图3

自定义内容

通过自定义 slot 显示多行文本或更复杂的样式。

  1. <template>
  2. <Tooltip placement="top">
  3. <Button>Multiple lines</Button>
  4. <div slot="content">
  5. <p>Display multiple lines of information</p>
  6. <p><i>Can customize the style</i></p>
  7. </div>
  8. </Tooltip>
  9. </template>
  10. <script>
  11. export default {
  12. }
  13. </script>

Tooltip 文字提示 - 图4

禁用

通过设置属性disabled可以禁用文字提示。

  1. <template>
  2. <Tooltip placement="top" content="Can disable text prompts" :disabled="disabled">
  3. <Button @click="disabled = true">Click to close</Button>
  4. </Tooltip>
  5. </template>
  6. <script>
  7. export default {
  8. data () {
  9. return {
  10. disabled: false
  11. }
  12. }
  13. }
  14. </script>

Tooltip 文字提示 - 图5

延时

通过设置属性delay可以延时显示文字提示,单位毫秒。

  1. <template>
  2. <Tooltip placement="top" content="Tooltip text" :delay="1000">
  3. <Button @click="disabled = true">Delay 1 second to show</Button>
  4. </Tooltip>
  5. </template>
  6. <script>
  7. export default {
  8. }
  9. </script>

Tooltip 文字提示 - 图6

主题

设置属性 theme 可以显示不同的颜色。

  1. <template>
  2. <Tooltip content="content of tooltip">
  3. <Button>Dark(default)</Button>
  4. </Tooltip>
  5. <Tooltip content="content of tooltip" theme="light">
  6. <Button>Light</Button>
  7. </Tooltip>
  8. </template>
  9. <script>
  10. export default {
  11. }
  12. </script>

Tooltip 文字提示 - 图7

自动换行

设置属性 max-width,当超出最大值后,文本将自动换行,并两端对齐。

  1. <template>
  2. <Tooltip max-width="200" content="Steven Paul Jobs was an American entrepreneur and business magnate. He was the chairman, chief executive officer, and a co-founder of Apple Inc.">
  3. <Button>Long Content</Button>
  4. </Tooltip>
  5. </template>
  6. <script>
  7. export default {
  8. }
  9. </script>

API

Tooltip props

属性 说明 类型 默认值
content 显示的内容 String | Number
placement 提示框出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end,2.12.0 版本开始支持自动识别 String bottom
disabled 是否禁用提示框 Boolean false
delay 延迟显示,单位毫秒 Number 0
always 是否总是可见 Boolean false
theme 主题,可选值为 dark 或 light String dark
max-width 最大宽度,超出最大值后,文本将自动换行,并两端对齐 String | Number -
offset 出现位置的偏移量 Number 0
transfer 是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果 Boolean false
options 自定义 popper.js 的配置项,具体配置见 popper.js 文档 Object
  1. {
  2. modifiers: {
  3. computeStyle:{
  4. gpuAcceleration: false,
  5. },
  6. preventOverflow :{
  7. boundariesElement: 'window'
  8. }
  9. }
  10. }

Tooltip events

事件名 说明 返回值
on-popper-show 在提示框显示时触发
on-popper-hide 在提示框消失时触发

Tooltip slot

名称 说明
主体内容
content 提示框的内容,定义此 slot 时,会覆盖 props content