更新记录

1.0.5（2025-06-04） 下载此版本

添加示例图

1.0.4（2025-06-04） 下载此版本

本次优化包括界面稳定性提升（消除样式抖动）、增强交互友好性（自动隐藏与防冒泡）、增加弹出方向控制，整体交互更加流畅自然。

1.0.3（2025-05-26） 下载此版本

更新使用示例

平台兼容性

uni-app

其他

Tooltip文字提示

组件名：zhuo-Tooltip-Text

安装方式

HBuilderX 3.1.0，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components

开发不易，如果帮助到你的，请支持 有问题请留言，作者会积极更新

基本用法

<!-- Tooltip文字提示使用示例 -->
<zhuo-Tooltip-Text :content="text2" theme="white" :font-size="14">
    <button>点击或长按显示 Tooltip</button>
</zhuo-Tooltip-Text>

Props

Events

无

Methods

Slots

示列代码

vue2 ｜ vue3 都可

<template>
    <view class="content">
        <view class="content2">
            <!-- 内嵌 -->
            <zhuo-Tooltip-Text
                :content="text2"
                theme="dark"
                :directions="['top', 'bottom', 'right', 'left']"
                :font-size="14"
            >
                <button>点击或长按显示 Tooltip</button>
            </zhuo-Tooltip-Text>

            <view style="margin: 100px 0 0 0">
                项目描述
                <zhuo-Tooltip-Text
                    :content="text2"
                    :isLongPress="true"
                    :font-size="14"
                    content-style="color: red; width: 50px"
                    :directions="['right']"
                >
                    <span style="color: blue">小丑</span>
                </zhuo-Tooltip-Text>
                小丑竟然是你
                <zhuo-Tooltip-Text
                    ref="tooltip1"
                    :content="text2"
                    theme="dark"
                    content-style="width: 50px"
                    :font-size="14"
                    :directions="['left']"
                >
                    小帅:
                </zhuo-Tooltip-Text>
                小帅是你
            </view>
        </view>
    </view>
</template>

<script setup>
const text =
    '四年春，齐侯以诸侯之师侵蔡，蔡溃，遂伐楚。楚子使与师言曰：“君处北海，寡人处南海，唯是风马牛不相及也。不虞君之涉吾地也，何故？”管仲对曰：“昔召康公命我先君大公曰：‘五侯九伯，女实征之，以夹辅周室。’赐我先君履：东至于海，西至于河，南至于穆陵，北至于无棣。尔贡包茅不入，王祭不共，无以缩酒，寡人是徵；昭王南征而不复，寡人是问。”对曰：“贡之不入，寡君之罪也，敢不共给？昭王之不复，君其问诸水滨。';
const text2 = '这是一个自动适配的提示框，内容可以很多也能适配屏幕！';
</script>