组件名:uni-tooltip

代码块: utooltip

点击下载&安装 (opens new window)

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

遮挡不住原生组件

# 介绍

# 安装方式

本组件符合easycom (opens new window)规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components

如需通过npm方式使用uni-ui组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55 (opens new window)

# 基本用法

template 中使用组件

<uni-tooltip :content="tooltip显示的内容">
  <button>被包裹的组件</button>
</uni-tooltip>

# API

# Tooltip Props

属性名 类型 默认值 说明
content String 弹出层显示的内容
placement String left Tooltip 的出现位置, 目前只支持 left

# Tooltip Slots

名称 说明
default 被 Tooltip 包裹的组件
content 弹出层插槽

# 示例

注意

直接拷贝示例代码,无法运行 ,示例依赖了 uni-card uni-section uni-scss 等多个组件。

请到 组件下载页面 (opens new window) ,在页面右侧选择 使用 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>

完整示例演示 (opens new window)