寻北

Appearance

Tooltip 文字提示 ​

常用于展示鼠标 hover 时的提示信息。

基础用法 ​

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

使用 content 属性来决定 hover 时的提示信息。 由 placement 属性决定展示效果： placement属性值为：[方向]；四个方向：top、left、right、bottom；

<template>
  <div class="tooltip-base-box">
    <div class="row center">
      <vk-tooltip
          class="box-item"
          content="top prompts info"
          placement="top"
      >
        <vk-button style="width: 100%;">top</vk-button>
      </vk-tooltip>
    </div>
    <div class="row">
      <vk-tooltip class="box-item"  placement="left">
        <template #content>
          Left
          <br />
          prompts info
        </template>
        <vk-button style="width: 100%;">left</vk-button>
      </vk-tooltip>
      <vk-tooltip class="box-item"  placement="right">
        <template #content>
          Right
          <br />
          prompts info
        </template>
        <vk-button style="width: 100%;">right</vk-button>
      </vk-tooltip>
    </div>
    <div class="row center">
      <vk-tooltip
          class="box-item"
          content="Bottom Center prompts info"
          placement="bottom"
      >
        <vk-button style="width: 100%;">bottom</vk-button>
      </vk-tooltip>
    </div>
  </div>
</template>
<script setup>
</script>

<style>
.tooltip-base-box {
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  width: 90px;
  margin-top: 10px;
}
</style>

更多内容的文字提示 ​

展示多行文本或者是设置文本内容的格式

用具名 slot content，替代tooltip中的content属性。

<template>
  <div class="tooltip-base-box">
    <vk-tooltip class="box-item"  placement="left">
      <template #content>
        Left
        <br />
        prompts info
      </template>
      <vk-button style="width: 100%;">left</vk-button>
    </vk-tooltip>
  </div>
</template>
<script setup>
</script>

<style>

</style>

自定义动画 ​

Tooltip 可以自定义动画，您可以使用 transition 设置所需的动画效果。

<template>
  <vk-tooltip content="I am an tooltip" transition="slide-fade">
    <vk-button>trigger me</vk-button>
  </vk-tooltip>
</template>

<script lang="ts" setup>
</script>

<style>
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(120px);
  opacity: 0;
}
</style>

受控模式 ​

Tooltip 可以通过父组件使用 manual 属性手动来控制它的显示与关闭。

<template>
  <vk-tooltip content="I am an tooltip" manual ref="tooltipRef" placement="right">
    <vk-button @click="open">open</vk-button>
    <vk-button @click="close">close</vk-button>
  </vk-tooltip>
</template>

<script lang="ts" setup>
import type {TooltipInstance} from "xb-element/dist/types/components/Tooltip/type";
import {ref} from "vue";

const tooltipRef=ref<TooltipInstance>()
const open=()=>{
  tooltipRef.value?.show()
}

const close=()=>{
  tooltipRef.value?.hide()
}
</script>

<style>

</style>

触发方式 ​

Tooltip 可以通过父组件使用 trigger 属性手动来切换它的触发方式。

<template>
    <div class="tooltipContainer">
      <vk-tooltip content="I am an clickvk-tooltip" :trigger="clickTrigger" placement="top">
        <vk-button>click</vk-button>
      </vk-tooltip>
      <vk-tooltip content="I am an hovervk-tooltip" :trigger="hoverTrigger" placement="top">
        <vk-button>Hover</vk-button>
      </vk-tooltip>
    </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";

const clickTrigger = ref('click');
const hoverTrigger = ref('hover');
</script>

<style scoped>
.tooltipContainer {
  width: 200px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>

延迟触发 ​

Tooltip 可以通过父组件使用 openDelay 和 closeDelay 属性来延迟它的显示和隐藏

<template>
  <vk-tooltip content="I am an tooltip" :open-delay="1000" :close-delay="200" placement="right">
    <vk-button>delay trigger</vk-button>
  </vk-tooltip>
</template>

<script lang="ts" setup>

</script>

<style>

</style>

Tooltip API ​

Tooltip Attributes ​

属性名说明类型默认值
content显示的内容，也可被 slot#content 覆盖string""
placementTooltip 组件出现的位置enum - 'left'| 'top'| 'right'| 'bottom'right
trigger提示框的触发方式（用于显示），在受控模式下无效。enum - 'hover'| 'click'hover
manual手动触发booleanfalse
popperOptionspopper.js 参数object{}
transition动画名称string-
openDelay延迟显示时间（以毫秒为单位），在受控模式下无效。number0
closeDelay消失延迟时间（以毫秒为单位），在受控模式下无效。number0

Tooltip Events ​

事件名说明类型
visible-change切换提示框显示时和关闭时触发，将触发原因作为参数传入。Function
click-outside在提示框隐藏时触发。 将触发原因作为参数传入。Function
show在提示框显示时触发。 将触发原因作为参数传入。Function
hide在提示框隐藏时触发。 将触发原因作为参数传入。Function

Tooltip Slots ​

插槽名描述
default提示框触发及参考元素，只接受单个根元素。
content自定义内容

Tooltip Exposes ​

方法名说明类型
hide提供 hide 方法Function
show提供 show 方法Function