Bobo-elements

Appearance

On this page

Tooltip 文字提示 ​

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

基本用法 ​

使用 content 属性来决定 hover 时的提示信息。

<script setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="basic block">
    <Tooltip
        content="hello tooltip"
    >
      <Button> 激活 Tooltip </Button>
    </Tooltip>
  </div>
</template>

不同位置 ​

由 placement 属性决定展示效果： placement属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。

<script setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="basic block">
    <Tooltip
        content="hello tooltip"
        placement="top-start"
    >
      <Button> top-start </Button>
    </Tooltip>

    <Tooltip
        content="hello tooltip"
        placement="bottom-start"
    >
      <Button> bottom-start </Button>
    </Tooltip>

    <Tooltip
        content="hello tooltip"
        placement="left-start"
    >
      <Button> left-start </Button>
    </Tooltip>

    <Tooltip
        content="hello tooltip"
        placement="right-start"
    >
      <Button> right-start </Button>
    </Tooltip>
  </div>
</template>
<style scoped>
.vk-button {
  margin-right: 20px;
}
</style>

触发方式 ​

由 trigger 属性决定触发方式： hover | click, 默认为 hover

<script setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="basic block">
    <Tooltip
        content="hello tooltip"
        trigger="click"
    >
      <Button> 点击激活 Tooltip </Button>
    </Tooltip>
  </div>
</template>

更多内容的文字提示 ​

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

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

<script setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="basic block">
    <Tooltip
        trigger="click"
    >
      <Button> 复杂 HTML 结构的Tooltip </Button>
      <template #content>
        <h3> this is the title</h3>
        <p> this is the content </p>
      </template>
    </Tooltip>
  </div>
</template>

手动触发 ​

将 manual 属性设置为 true 即可， 然后可以使用实例上面的 show 和 hide 方法打开关闭下拉菜单。



<script setup>
import { ref } from 'vue'
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'

const tooltipRef = ref()
const open = () => {
  tooltipRef.value?.show()
}
const close = () => {
  tooltipRef.value?.hide()
}
</script>
<template>
  <div class="basic block">
    <Tooltip
        content="hello tooltip"
        ref="tooltipRef"
        manual
    >
      <Button> 手动容器 </Button>
    </Tooltip>

    <br/><br/>
    <Button type="primary" @click="open"> 点击手动触发显示 </Button>
    <Button type="danger" @click="close"> 点击手动触发隐藏 </Button>
  </div>
</template>