uni-app

introduce

Installation method

Basic usage

Component name: uni-tooltip

Code block: utooltip

Click to download & install

It is often used to display the prompt information when the mouse hovers.

Can't block native components

# introduce

# Installation method

This component complies with the easycom specification. From HBuilderX 2.5.5, you only need to import this component into the project, and in the page template Can be used directly without import and registering components in the page.

If you want to use the uni-ui component through npm, see also the documentation: [https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn /plugin?id=55)

# Basic usage

Using components in template

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

# API

property name	type	default value	description
content	String		弹出层显示的内容
placement	String	left	Tooltip 的出现位置, 支持 left,right,top,bottom

Name	Description
default	Component wrapped by Tooltip
content	Popup slot

# Example

attention

Copying the sample code directly will not work. The sample relies on multiple components such as uni-card uni-section uni-scss.

Please go to the Component download page , select Import sample project using HBuilderX on the right side of the page to experience the complete component example.

<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>
			<view class="direction-container">
				<uni-tooltip content="示例文字" placement="top">
					<view class="item">上</view>
				</uni-tooltip>
				<uni-tooltip class="item" content="示例文字" placement="bottom">
					<view class="item">下</view>
				</uni-tooltip>
				<uni-tooltip class="item" content="示例文字" placement="left">
					<view class="item">左</view>
				</uni-tooltip>
				<uni-tooltip class="item" content="示例文字" placement="right">
					<view class="item">右</view>
				</uni-tooltip>
			</view>
		</uni-section>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {};
    },
  };
</script>

<style lang="scss">
  .direction-container {
		display: flex;
		width: 100px;
		margin: 0 auto;
		flex-wrap: wrap;
	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		background-color: #ebebeb;
		border-radius: 10px;
		margin: 5px;
	}
</style>