更新记录

1.0.1（2026-03-24） 下载此版本

• 修改配置文件

1.0.0（2026-03-24） 下载此版本

• 支持基础显示/隐藏逻辑（点击触发）
• 支持 placement（top / bottom）位置控制
• 支持 effect 主题（dark / light）
• 支持 disabled 禁用状态
• 增加遮罩层（mask），点击外部可关闭 Tooltip

平台兼容性

uni-app(3.7.1)

uni-app x(3.7.1)

s-tooltip 文字提示

点击元素显示文字提示框组件，支持多种位置、主题和自定义内容。

基本用法

基础示例

<s-tooltip content="这是一段提示内容">
  <view>点击显示提示</view>
</s-tooltip>

设置位置方向

通过 placement 属性设置提示框的显示位置，支持 top（默认）和 bottom 两种方向。

<!-- 顶部显示 -->
<s-tooltip content="上方提示" placement="top">
  <view>顶部</view>
</s-tooltip>

<!-- 底部显示 -->
<s-tooltip content="下方提示" placement="bottom">
  <view>底部</view>
</s-tooltip>

设置主题样式

通过 effect 属性设置主题样式，支持 dark（默认）和 light 两种主题。

<!-- 深色主题 -->
<s-tooltip content="深色主题" effect="dark">
  <view>深色</view>
</s-tooltip>

<!-- 浅色主题 -->
<s-tooltip content="浅色主题" effect="light">
  <view>浅色</view>
</s-tooltip>

禁用状态

通过 disabled 属性禁用提示框的显示。

<!-- 禁用 -->
<s-tooltip content="禁用状态不显示" :disabled="true">
  <view>禁用</view>
</s-tooltip>

<!-- 正常 -->
<s-tooltip content="正常状态" :disabled="false">
  <view>正常</view>
</s-tooltip>

控制显示

通过 showTooltip 属性控制提示框是否可以显示。

<!-- 允许显示 -->
<s-tooltip content="可以显示" :showTooltip="true">
  <view>显示</view>
</s-tooltip>

<!-- 禁止显示 -->
<s-tooltip content="不显示" :showTooltip="false">
  <view>不显示</view>
</s-tooltip>

自定义触发器

支持任意元素作为触发器，可以是按钮、图标、卡片等。

<!-- 按钮触发器 -->
<s-tooltip content="按钮提示">
  <button>按钮</button>
</s-tooltip>

<!-- 图标触发器 -->
<s-tooltip content="图标提示">
  <text>ℹ️</text>
</s-tooltip>

<!-- 卡片触发器 -->
<s-tooltip content="卡片提示">
  <view class="card">卡片元素</view>
</s-tooltip>

动态内容

提示内容可以动态更新。

<template>
  <s-tooltip :content="dynamicContent">
    <view @click="updateContent">点击更新内容</view>
  </s-tooltip>
</template>

<script setup>
import { ref } from 'vue'

const dynamicContent = ref('初始内容')

function updateContent() {
  dynamicContent.value = '更新后的内容'
}
</script>

API

Props

Events

Slots

注意事项

1. 组件会自动计算提示框的边界位置，避免超出屏幕显示范围
2. 点击提示框以外的区域会自动关闭提示框
3. 支持长文本内容自动换行
4. 最大宽度限制为 70vw，建议内容不要过长

完整示例

<template>
  <view class="page">
    <view class="demo-card">
      <view class="demo-card__title">基础用法</view>
      <s-tooltip content="这是一段提示内容">
        <view class="trigger">点击显示提示</view>
      </s-tooltip>
    </view>

    <view class="demo-card">
      <view class="demo-card__title">位置和主题</view>
      <view class="demo-row">
        <s-tooltip content="上-深色" placement="top" effect="dark">
          <view class="trigger">上-深</view>
        </s-tooltip>
        <s-tooltip content="下-浅色" placement="bottom" effect="light">
          <view class="trigger">下-浅</view>
        </s-tooltip>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  padding: 30rpx;
}

.demo-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.demo-card__title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 20rpx;
}

.demo-row {
  display: flex;
  gap: 20rpx;
}

.trigger {
  padding: 20rpx 32rpx;
  background: #2a82da;
  color: #fff;
  border-radius: 20rpx;
}
</style>