Sakana Element

简体中文

English

简体中文

English

主题

Tooltip 文字提示 ​

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

?
名称分类说明类型默认值
effect? 风格主题风格'dark' | 'light''dark'
maxWidth? 风格最大宽度，超出后自动换行string | number—
showArrow? 风格是否显示箭头booleanfalse
transition? 风格动画名称string'fade'
type? 颜色主题颜色'primary' | 'success' | 'warning' | 'danger' | 'info'—
disabled? 状态是否禁用booleanfalse
placement? 行为出现位置'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end''bottom'
trigger? 行为触发方式'hover' | 'click' | 'contextmenu''hover'
manual? 行为手动控制模式booleanfalse
enterable? 行为鼠标是否可进入到 tooltip 中booleantrue
showTimeout? 行为显示延迟（毫秒）number0
hideTimeout? 行为隐藏延迟（毫秒）number200
virtualTriggering? 行为是否使用虚拟触发节点booleanfalse
virtualRef? 行为虚拟触发节点的引用HTMLElement—
popperOptions? 行为popper.js 配置object—
content? 内容显示的内容string—
visible-change? 事件可见性改变时触发(visible: boolean) => void—
click-outside? 事件点击外部区域时触发() => void—
default? 插槽触发 Tooltip 的元素—
content? 插槽自定义内容—
show? 暴露显示 Tooltip() => void—
hide? 暴露隐藏 Tooltip() => void—
toggle? 暴露切换 Tooltip 显示/隐藏() => void—

基础用法 ​

使用 content 属性来设置提示内容。

<template>
  <px-tooltip content="This is tooltip content">
    <px-button>Hover me</px-button>
  </px-tooltip>
</template>

主题风格 ​

使用 effect 在深色和浅色主题之间切换。

<template>
  <div class="demo-tooltip">
    <px-tooltip content="Dark effect (default)" effect="dark">
      <px-button>Dark</px-button>
    </px-tooltip>
    <px-tooltip content="Light effect" effect="light">
      <px-button>Light</px-button>
    </px-tooltip>
  </div>
</template>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
}
</style>

主题颜色 ​

使用 type 设置主题色。

<template>
  <div class="demo-tooltip">
    <px-tooltip content="Primary" type="primary">
      <px-button type="primary">Primary</px-button>
    </px-tooltip>
    <px-tooltip content="Success" type="success">
      <px-button type="success">Success</px-button>
    </px-tooltip>
    <px-tooltip content="Warning" type="warning">
      <px-button type="warning">Warning</px-button>
    </px-tooltip>
    <px-tooltip content="Danger" type="danger">
      <px-button type="danger">Danger</px-button>
    </px-tooltip>
    <px-tooltip content="Info" type="info">
      <px-button type="info">Info</px-button>
    </px-tooltip>
  </div>
</template>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

不同位置 ​

使用 placement 属性来设置 Tooltip 出现的位置。

<template>
  <div class="demo-tooltip">
    <px-tooltip content="Top" placement="top">
      <px-button>Top</px-button>
    </px-tooltip>
    <px-tooltip content="Bottom" placement="bottom">
      <px-button>Bottom</px-button>
    </px-tooltip>
    <px-tooltip content="Left" placement="left">
      <px-button>Left</px-button>
    </px-tooltip>
    <px-tooltip content="Right" placement="right">
      <px-button>Right</px-button>
    </px-tooltip>
  </div>
</template>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

触发方式 ​

使用 trigger 属性来设置触发方式。

<template>
  <div class="demo-tooltip">
    <px-tooltip content="Hover trigger" trigger="hover">
      <px-button>Hover</px-button>
    </px-tooltip>
    <px-tooltip content="Click trigger" trigger="click">
      <px-button>Click</px-button>
    </px-tooltip>
    <px-tooltip content="Right click trigger" trigger="contextmenu">
      <px-button>Right Click</px-button>
    </px-tooltip>
  </div>
</template>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
}
</style>

最大宽度 ​

使用 max-width 限制提示框宽度，超出后自动换行。

<template>
  <px-tooltip
    content="This is a very long tooltip content that will be constrained by the max-width property, causing the text to wrap to multiple lines."
    max-width="200px"
  >
    <px-button>Max Width 200px</px-button>
  </px-tooltip>
</template>

可进入 ​

当 enterable 为 true（默认）时，鼠标移入提示框后不会关闭。设为 false 鼠标移出后立即关闭。

<template>
  <div class="demo-tooltip">
    <px-tooltip content="You can hover over me" :enterable="true">
      <px-button>Enterable (default)</px-button>
    </px-tooltip>
    <px-tooltip content="I will disappear immediately" :enterable="false">
      <px-button>Not Enterable</px-button>
    </px-tooltip>
  </div>
</template>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
}
</style>

手动控制 ​

使用 manual 模式配合暴露的 show / hide / toggle 方法进行程序化控制。

<template>
  <div class="demo-tooltip">
    <px-tooltip ref="tooltipRef" content="Manual control" :manual="true">
      <px-button>Manual Tooltip</px-button>
    </px-tooltip>
    <px-button @click="tooltipRef?.show()">Show</px-button>
    <px-button @click="tooltipRef?.hide()">Hide</px-button>
    <px-button @click="tooltipRef?.toggle()">Toggle</px-button>
  </div>
</template>

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

const tooltipRef = ref();
</script>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
}
</style>

禁用状态 ​

使用 disabled 属性来禁用 Tooltip。

<template>
  <div class="demo-tooltip">
    <px-tooltip content="Disabled tooltip" :disabled="disabled">
      <px-button>{{ disabled ? 'Disabled' : 'Enabled' }}</px-button>
    </px-tooltip>
    <px-button @click="disabled = !disabled">Toggle</px-button>
  </div>
</template>

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

const disabled = ref(false);
</script>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
}
</style>

虚拟触发 ​

使用 virtual-triggering 和 virtual-ref 从外部 DOM 元素触发 Tooltip。

<template>
  <div class="demo-tooltip">
    <div ref="triggerRef" class="virtual-trigger">
      Virtual Trigger Element
    </div>
    <px-tooltip
      content="I'm triggered by the element above"
      :virtual-triggering="true"
      :virtual-ref="triggerRef"
    />
  </div>
</template>

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

const triggerRef = ref();
</script>

<style scoped>
.demo-tooltip {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.virtual-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 2px dashed var(--px-border-color);
  cursor: pointer;
  font-family: var(--px-font-family);
}
</style>

显示箭头 ​

使用 show-arrow 显示指向触发元素的像素风格箭头。

<template>
  <div class="demo-tooltip">
    <px-tooltip content="With pixel arrow" :show-arrow="true" placement="top">
      <px-button>Top Arrow</px-button>
    </px-tooltip>
    <px-tooltip content="With pixel arrow" :show-arrow="true" placement="bottom">
      <px-button>Bottom Arrow</px-button>
    </px-tooltip>
    <px-tooltip content="No arrow (default)">
      <px-button>No Arrow</px-button>
    </px-tooltip>
  </div>
</template>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
}
</style>

自定义内容 ​

使用 content 插槽在提示框中放置富文本内容。

<template>
  <px-tooltip trigger="click">
    <px-button>Rich Content</px-button>
    <template #content>
      <div class="custom-content">
        <strong>Custom Tooltip</strong>
        <p>Supports rich HTML content via the <code>content</code> slot.</p>
      </div>
    </template>
  </px-tooltip>
</template>

<style scoped>
.custom-content {
  max-width: 200px;
}
.custom-content p {
  margin: 4px 0 0;
  font-size: 12px;
  opacity: 0.85;
}
</style>