Tooltip

简单的文字提示气泡框。

何时使用

鼠标移入则显示提示,移出消失,气泡浮层不承载复杂文本和操作。

可用来代替系统默认的 ‘title’ 提示,提供一个’按钮/文字/操作’的文案解释。

代码演示

Tooltip will show when mouse enter.

基本

最简单的用法。

  1. <template>
  2. <a-tooltip>
  3. <template slot="title">
  4. prompt text
  5. </template>
  6. Tooltip will show when mouse enter.
  7. </a-tooltip>
  8. </template>

Tooltip文字提示 - 图1

箭头指向

设置了 arrowPointAtCenter 后,箭头将指向目标元素的中心。

  1. <template>
  2. <div>
  3. <a-tooltip placement="topLeft" title="Prompt Text">
  4. <a-button>Align edge / 边缘对齐</a-button>
  5. </a-tooltip>
  6. <a-tooltip placement="topLeft" title="Prompt Text" arrow-point-at-center>
  7. <a-button>Arrow points to center / 箭头指向中心</a-button>
  8. </a-tooltip>
  9. </div>
  10. </template>

Tooltip文字提示 - 图2

位置

位置有 12 个方向。

  1. <template>
  2. <div id="components-a-tooltip-demo-placement">
  3. <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
  4. <a-tooltip placement="topLeft">
  5. <template slot="title">
  6. <span>prompt text</span>
  7. </template>
  8. <a-button>TL</a-button>
  9. </a-tooltip>
  10. <a-tooltip placement="top">
  11. <template slot="title">
  12. <span>prompt text</span>
  13. </template>
  14. <a-button>Top</a-button>
  15. </a-tooltip>
  16. <a-tooltip placement="topRight">
  17. <template slot="title">
  18. <span>prompt text</span>
  19. </template>
  20. <a-button>TR</a-button>
  21. </a-tooltip>
  22. </div>
  23. <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
  24. <a-tooltip placement="leftTop">
  25. <template slot="title">
  26. <span>prompt text</span>
  27. </template>
  28. <a-button>LT</a-button>
  29. </a-tooltip>
  30. <a-tooltip placement="left">
  31. <template slot="title">
  32. <span>prompt text</span>
  33. </template>
  34. <a-button>Left</a-button>
  35. </a-tooltip>
  36. <a-tooltip placement="leftBottom">
  37. <template slot="title">
  38. <span>prompt text</span>
  39. </template>
  40. <a-button>LB</a-button>
  41. </a-tooltip>
  42. </div>
  43. <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24}px` }">
  44. <a-tooltip placement="rightTop">
  45. <template slot="title">
  46. <span>prompt text</span>
  47. </template>
  48. <a-button>RT</a-button>
  49. </a-tooltip>
  50. <a-tooltip placement="right">
  51. <template slot="title">
  52. <span>prompt text</span>
  53. </template>
  54. <a-button>Right</a-button>
  55. </a-tooltip>
  56. <a-tooltip placement="rightBottom">
  57. <template slot="title">
  58. <span>prompt text</span>
  59. </template>
  60. <a-button>RB</a-button>
  61. </a-tooltip>
  62. </div>
  63. <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
  64. <a-tooltip placement="bottomLeft">
  65. <template slot="title">
  66. <span>prompt text</span>
  67. </template>
  68. <a-button>BL</a-button>
  69. </a-tooltip>
  70. <a-tooltip placement="bottom">
  71. <template slot="title">
  72. <span>prompt text</span>
  73. </template>
  74. <a-button>Bottom</a-button>
  75. </a-tooltip>
  76. <a-tooltip placement="bottomRight">
  77. <template slot="title">
  78. <span>prompt text</span>
  79. </template>
  80. <a-button>BR</a-button>
  81. </a-tooltip>
  82. </div>
  83. </div>
  84. </template>
  85. <script>
  86. export default {
  87. data() {
  88. return {
  89. buttonWidth: 70,
  90. };
  91. },
  92. };
  93. </script>
  94. <style scoped>
  95. #components-a-tooltip-demo-placement .ant-btn {
  96. width: 70px;
  97. text-align: center;
  98. padding: 0;
  99. margin-right: 8px;
  100. margin-bottom: 8px;
  101. }
  102. </style>

Tooltip文字提示 - 图3

自动调整位置

气泡框不可见时自动调整位置

  1. <template>
  2. <div :style="wrapStyles">
  3. <a-tooltip placement="left" title="Prompt Text" :get-popup-container="getPopupContainer">
  4. <a-button>Adjust automatically / 自动调整</a-button>
  5. </a-tooltip>
  6. <br />
  7. <a-tooltip
  8. style="marginTop: 10px"
  9. placement="left"
  10. title="Prompt Text"
  11. :get-popup-container="getPopupContainer"
  12. :auto-adjust-overflow="false"
  13. >
  14. <a-button>Ingore / 不处理</a-button>
  15. </a-tooltip>
  16. </div>
  17. </template>
  18. <script>
  19. const wrapStyles = {
  20. overflow: 'hidden',
  21. position: 'relative',
  22. padding: '24px',
  23. border: '1px solid #e9e9e9',
  24. };
  25. export default {
  26. data() {
  27. return {
  28. wrapStyles,
  29. };
  30. },
  31. methods: {
  32. getPopupContainer(trigger) {
  33. return trigger.parentElement;
  34. },
  35. },
  36. };
  37. </script>

API

参数说明类型默认值
title提示文字string|slot

共同的 API

以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。

参数说明类型默认值
arrowPointAtCenter箭头是否指向目标元素中心booleanfalse
autoAdjustOverflow气泡被遮挡时自动调整位置booleantrue
defaultVisible默认是否显隐booleanfalse
getPopupContainer浮层渲染父节点,默认渲染到 body 上Function(triggerNode)() => document.body
mouseEnterDelay鼠标移入后延时多少才显示 Tooltip,单位:秒number0
mouseLeaveDelay鼠标移出后延时多少才隐藏 Tooltip,单位:秒number0.1
overlayClassName卡片类名string
overlayStyle卡片样式object
placement气泡框位置,可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottomstringtop
trigger触发行为,可选 hover/focus/click/contextmenustringhover
visible(v-model)用于手动控制浮层显隐booleanfalse
destroyTooltipOnHide隐藏后是否销毁 tooltipbooleanfalse
align该值将合并到 placement 的配置中,设置参考 dom-alignObject

事件

事件名称说明回调参数
visibleChange显示隐藏的回调(visible) => void

注意

请确保 Tooltip 的子元素能接受 mouseentermouseleavefocusclick 事件。