• Tooltip
    • 何时使用
    • 代码演示
      • 基本
      • 位置
      • 箭头指向
      • 自动调整位置
  • API
    • 共同的 API
    • 事件
  • 注意

    Tooltip

    简单的文字提示气泡框。

    何时使用

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

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

    代码演示

    Tooltip 文字提示 - 图1

    基本

    最简单的用法。

    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 文字提示 - 图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

    箭头指向

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

    <template>
      <div>
        <a-tooltip placement="topLeft" title="Prompt Text">
          <a-button>Align edge / 边缘对齐</a-button>
        </a-tooltip>
        <a-tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
          <a-button>Arrow points to center / 箭头指向中心</a-button>
        </a-tooltip>
      </div>
    </template>
    

    Tooltip 文字提示 - 图4

    自动调整位置

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

    <template>
      <div :style="wrapStyles">
        <a-tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer">
          <a-button>Adjust automatically / 自动调整</a-button>
        </a-tooltip>
        <br />
        <a-tooltip
          style="marginTop: 10px"
          placement="left"
          title="Prompt Text"
          :getPopupContainer="getPopupContainer"
          :autoAdjustOverflow="false"
        >
          <a-button>Ingore / 不处理</a-button>
        </a-tooltip>
      </div>
    </template>
    <script>
      const wrapStyles = {
        overflow: 'hidden',
        position: 'relative',
        padding: '24px',
        border: '1px solid #e9e9e9',
      };
      export default {
        data() {
          return {
            wrapStyles,
          };
        },
        methods: {
          getPopupContainer(trigger) {
            return trigger.parentElement;
          },
        },
      };
    </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 事件。