使用

一些tooltip信息
<template>
  <c-tooltip content="一些tooltip信息">
    <c-button label="Hover Me" />
  </c-tooltip>
</template>
点击展开/收起代码
点击打开交互式编辑器

位置

top-left
来自于位置top-left的tooltip信息
top
来自于位置top的tooltip信息
top-right
来自于位置top-right的tooltip信息
right-top
来自于位置right-top的tooltip信息
right
来自于位置right的tooltip信息
right-bottom
来自于位置right-bottom的tooltip信息
bottom-left
来自于位置bottom-left的tooltip信息
bottom
来自于位置bottom的tooltip信息
bottom-right
来自于位置bottom-right的tooltip信息
left-top
来自于位置left-top的tooltip信息
left
来自于位置left的tooltip信息
left-bottom
来自于位置left-bottom的tooltip信息
<script setup>
const positions = [
  'top-left',
  'top',
  'top-right',
  'right-top',
  'right',
  'right-bottom',
  'bottom-left',
  'bottom',
  'bottom-right',
  'left-top',
  'left',
  'left-bottom',
]
</script>

<template>
  <div class="tooltips">
    <c-tooltip
      v-for="p in positions"
      :key="p"
      :content="`来自于位置${p}的tooltip信息`"
      :position="p"
    >
      {{ p }}
    </c-tooltip>
  </div>
</template>

<style scoped>
.tooltips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tooltips > div {
  line-height: 3em;
  text-align: center;
  background-color: var(--casual-primary);
  color: #eee;
}
</style>
点击展开/收起代码
点击打开交互式编辑器

自定义内容

哇,可以使用任何元素作为自定义内容哦
<template>
  <c-tooltip
    position="right"
    trigger="click"
  >
    <c-button label="点我" />
    <template #popup>
      <div class="custom-content">
        哇,可以使用任何元素作为自定义内容哦
        <c-button
          rounded
          outlined
          label="自定义按钮"
        />
      </div>
    </template>
  </c-tooltip>
</template>

<style scoped>
.custom-content {
  white-space: nowrap;
  background: #333;
  padding: 12px;
  color: #fff;
}
</style>
点击展开/收起代码
点击打开交互式编辑器

触发方式

你好,世界
你好,世界
点击左侧按钮手动触发
你好,世界
<script setup>
import { ref } from 'vue'
const show = ref(false)

const toggleShow = () => {
  show.value = !show.value
}
</script>

<template>
  <div class="popups">
    <c-tooltip content="你好,世界">
      <c-button
        outlined
        rounded
        label="悬浮(默认)"
      />
    </c-tooltip>
    <c-tooltip
      trigger="click"
      content="你好,世界"
    >
      <c-button
        rounded
        label="点击"
      />
    </c-tooltip>
    <div>
      <c-button
        label="手动"
        @click="toggleShow"
      />
      <c-tooltip
        v-model:show="show"
        trigger="manual"
        content="你好,世界"
      >
        点击左侧按钮手动触发
      </c-tooltip>
    </div>
  </div>
</template>

<style scoped>
.popups {
  display: flex;
}
div + div {
  margin-left: 12px;
}
</style>
点击展开/收起代码
点击打开交互式编辑器

CTooltip API

Props
Slots
Events
content
string | number
默认值  ''

弹出的内容文字

position
Position
默认值  'top'

弹出位置

trigger
"hover" | "click" | "manual"
默认值  'hover'

触发方式

show
boolean
默认值  false

是否展示弹出内容,可以使用v-model:show,仅在trigger = 'manual'时可用