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: []( /plugin?id=55)

# Basic usage

Using components in template

<uni-tooltip :content="tooltip显示的内容" placement="left">


# Tooltip Props

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

# Tooltip Slots

Name Description
default Component wrapped by Tooltip
content Popup slot

# Example


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.

  <view class="container">
    <uni-card is-full :is-shadow="false">
      <text class="uni-h6">常用于展示鼠标 hover 时的提示信息,注意:无法覆盖原生组件</text>
    <uni-section title="基础用法" type="line" padding>
      <uni-tooltip content="提示文字" />
    <uni-section title="自定义弹出层方向" type="line" padding>
			<view class="direction-container">
				<uni-tooltip content="示例文字" placement="top">
					<view class="item"></view>
				<uni-tooltip class="item" content="示例文字" placement="bottom">
					<view class="item"></view>
				<uni-tooltip class="item" content="示例文字" placement="left">
					<view class="item"></view>
				<uni-tooltip class="item" content="示例文字" placement="right">
					<view class="item"></view>

  export default {
    components: {},
    data() {
      return {};

<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;

Complete example demo