Personal notes

Appearance

Tooltip 组件 ​

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

基础用法 ​

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

 
 
 
  
<template>
  <Tooltip content="top content" placement="top" trigger="hover">
    <VButton plain>top</VButton>
  </Tooltip>
  &nbsp;
  <Tooltip content="left content" placement="left" trigger="hover">
    <VButton plain>left</VButton>
  </Tooltip>
  &nbsp;
  <Tooltip content="right content" placement="right" trigger="hover">
    <VButton plain>right</VButton>
  </Tooltip>
  &nbsp;
  <Tooltip content="bottom content" placement="bottom" trigger="hover">
    <VButton plain>bottom</VButton>
  </Tooltip>
  &nbsp;
  <Tooltip content="click content" placement="bottom" trigger="click">
    <VButton plain>click</VButton>
  </Tooltip>
</template>

<script setup lang="ts">
import Tooltip from '@/components/Tooltip/Tooltip.vue';
import VButton from '@/components/Button/VButton.vue';
</script>

<style scoped></style>
<template>
  <Tooltip content="top content" placement="top" trigger="hover">
    <VButton plain>top</VButton>
  </Tooltip>
  &nbsp;
  <Tooltip content="left content" placement="left" trigger="hover">
    <VButton plain>left</VButton>
  </Tooltip>
  &nbsp;
  <Tooltip content="right content" placement="right" trigger="hover">
    <VButton plain>right</VButton>
  </Tooltip>
  &nbsp;
  <Tooltip content="bottom content" placement="bottom" trigger="hover">
    <VButton plain>bottom</VButton>
  </Tooltip>
  &nbsp;
  <Tooltip content="click content" placement="bottom" trigger="click">
    <VButton plain>click</VButton>
  </Tooltip>
</template>

<script setup lang="ts">
import Tooltip from '@/components/Tooltip/Tooltip.vue';
import VButton from '@/components/Button/VButton.vue';
</script>

<style scoped></style>
  
<template>
  <div>
    <Tooltip ref="tooltipRef" content="top content" placement="top" trigger="hover" manual>
      <div :style="{ width: '100px', height: '100px', backgroundColor: '#ccc' }"></div>
    </Tooltip>
  </div>
  <VButton plain @click="() => tooltipRef.show()">点击打开</VButton>
  &nbsp;
  <VButton plain @click="() => tooltipRef.hide()">点击关闭</VButton>
</template>

<script setup lang="ts">
import Tooltip from '@/components/Tooltip/Tooltip.vue';
import { TooltipInstance } from '@/components/Tooltip/types';
import VButton from '@/components/Button/VButton.vue';
import { ref } from 'vue';
const tooltipRef = ref<TooltipInstance>();
</script>

<style scoped></style>
<template>
  <div>
    <Tooltip ref="tooltipRef" content="top content" placement="top" trigger="hover" manual>
      <div :style="{ width: '100px', height: '100px', backgroundColor: '#ccc' }"></div>
    </Tooltip>
  </div>
  <VButton plain @click="() => tooltipRef.show()">点击打开</VButton>
  &nbsp;
  <VButton plain @click="() => tooltipRef.hide()">点击关闭</VButton>
</template>

<script setup lang="ts">
import Tooltip from '@/components/Tooltip/Tooltip.vue';
import { TooltipInstance } from '@/components/Tooltip/types';
import VButton from '@/components/Button/VButton.vue';
import { ref } from 'vue';
const tooltipRef = ref<TooltipInstance>();
</script>

<style scoped></style>

Tooltip Attributes ​

NameDescriptionTypeDefault
content提示框内容string-
trigger提示框触发方式hover / clickhover
placement提示框显示位置top-start / top-end / bottom-start / bottom-end / right-start / right-end / left-start / left-endbottom-end
manual是否手动控制提示框的显示与隐藏booleanfalse
openDelay打开提示框的延迟时间number0
closeDelay关闭提示框的延迟时间number0

Tooltip Slots ​

插槽名说明
defaultTooltip 触发 & 引用的元素
content自定义内容

Tooltip Exposes ​

属性名说明类型
show显示提示框Function
hide隐藏提示框Function