Xu-Element

Appearance

Tooltip 文字提示 ​

基础用法 ​

在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。

使用 content 属性来决定 hover 时的提示信息。 由 placement 属性决定展示效果： placement属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。 如 placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

<template>
  <div class="basic-center">
    <div class="flex-center">
      <XuTooltip placement="top-start" content="这是一个文字提示">
        <XuButton>top-start</XuButton>
      </XuTooltip>
      <XuTooltip placement="top" content="这是一个文字提示">
        <XuButton>top</XuButton>
      </XuTooltip>
      <XuTooltip placement="top-end" content="这是一个文字提示">
        <XuButton>top-end</XuButton>
      </XuTooltip>
    </div>
    <div class="flex-space-between">
      <XuTooltip placement="left-start" content="这是一个文字提示">
        <XuButton>left-start</XuButton>
      </XuTooltip>
      <XuTooltip placement="right-start" content="这是一个文字提示">
        <XuButton>right-start</XuButton>
      </XuTooltip>
    </div>
    <div class="flex-space-between">
      <XuTooltip placement="left" content="这是一个文字提示">
        <XuButton>left</XuButton>
      </XuTooltip>
      <XuTooltip placement="right" content="这是一个文字提示">
        <XuButton>right</XuButton>
      </XuTooltip>
    </div>
    <div class="flex-space-between">
      <XuTooltip placement="left-end" content="这是一个文字提示">
        <XuButton>left-end</XuButton>
      </XuTooltip>
      <XuTooltip placement="right-end" content="这是一个文字提示">
        <XuButton>right-end</XuButton>
      </XuTooltip>
    </div>
    <div class="flex-center">
      <XuTooltip placement="bottom-start" content="这是一个文字提示">
        <XuButton>bottom-start</XuButton>
      </XuTooltip>
      <XuTooltip placement="bottom" content="这是一个文字提示">
        <XuButton>bottom</XuButton>
      </XuTooltip>
      <XuTooltip placement="bottom-end" content="这是一个文字提示">
        <XuButton>bottom-end</XuButton>
      </XuTooltip>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.basic-center {
  padding: 20px;
  > div + div {
    margin-top: 16px;
  }
  .flex-center {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .flex-space-between {
    display: flex;
    justify-content: space-between;
  }
}
</style>

主题 ​

Tooltip 组件内置了两个主题：dark 和 light。

<template>
  <div class="flex-container">
    <XuTooltip content="这是一个文字提示" effect="dark">
      <XuButton>dark</XuButton>
    </XuTooltip>
    <XuTooltip content="这是一个文字提示" effect="light">
      <XuButton>light</XuButton>
    </XuTooltip>
  </div>
</template>
<style lang="scss" scoped>
.flex-container {
  display: flex;
  gap: 10px;
}
</style>

禁用状态 ​

Tooltip 组件提供了 disabled 属性来禁用状态。

<template>
  <div class="flex-container">
    <XuTooltip content="这是一个文字提示" disabled>
      <XuButton>已禁用</XuButton>
    </XuTooltip>
  </div>
</template>
<style lang="scss" scoped>
.flex-container {
  display: flex;
  gap: 10px;
}
</style>

Tooltip API ​

Tooltip Attributes ​

参数说明类型可选值默认值
content显示的内容，也可以通过 slot#content 传入 DOMstring——
effectTooltip 主题string'dark' / 'light''dark'
placementTooltip 的出现位置string'top' / 'top-start' / 'top-end' / 'bottom' / 'bottom-start' / 'bottom-end' / 'left' / 'left-start' / 'left-end' / 'right' / 'right-start' / 'right-end''top'
trigger触发方式string'hover' / 'click' / 'focus' / 'contextmenu''hover'
disabled是否禁用 Tooltipboolean—false
delay延迟显示，单位毫秒number—0
transition显示隐藏的动画过渡时间，单位毫秒string—undefined
showArrow是否显示箭头boolean—true
popperClass自定义类名string——
manual是否手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效boolean—false
offset出现位置的偏移量number—0
popperOptionspopper.js 的参数Record<string, any>——

Tooltip Slots ​

名称说明
defaultTooltip 触发 & 参考元素
content自定义内容，参数为

Tooltip Events ​

事件名称说明回调参数
showTooltip 显示时触发—
hideTooltip 隐藏时触发—