

简体中文
常用于展示鼠标 hover 时的提示信息。
遮挡不住原生组件
本组件符合easycom规范,HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
如需通过npm
方式使用uni-ui
组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55
在 template
中使用组件
<uni-tooltip :content="tooltip显示的内容">
<button>被包裹的组件</button>
</uni-tooltip>
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
content | String | 弹出层显示的内容 | |
placement | String | left | Tooltip 的出现位置, 目前只支持 left |
名称 | 说明 |
---|---|
default | 被 Tooltip 包裹的组件 |
content | 弹出层插槽 |
注意
直接拷贝示例代码,无法运行 ,示例依赖了 uni-card
uni-section
uni-scss
等多个组件。
请到 组件下载页面 ,在页面右侧选择 使用 HBuilderX导入示例项目
,体验完整组件示例。
<template>
<view class="container">
<uni-card is-full :is-shadow="false">
<text class="uni-h6">常用于展示鼠标 hover 时的提示信息,注意:无法覆盖原生组件</text>
</uni-card>
<uni-section title="基础用法" type="line" padding>
<uni-tooltip content="提示文字" />
</uni-section>
<uni-section title="插槽用法" type="line" padding>
<uni-tooltip content="提示文字">一段文字</uni-tooltip>
</uni-section>
<uni-section title="自定义弹层宽度" type="line" padding>
<uni-tooltip content="提示文字">一段文字</uni-tooltip>
</uni-section>
</view>
</template>
<script>
export default {
components: {},
data() {
return {};
},
};
</script>
<style lang="scss"></style>