在uniapp中,tooltip功能通常是通过view组件的hover-class属性来实现的,而不是直接放在form的label上。hover-class属性可以定义当元素处于hover状态时的样式类,通过这个属性,可以实现一个类似tooltip的效果。
以下是一个简单的例子,展示如何在uniapp中使用hover-class来实现一个tooltip效果:
<template>
<view class="container">
<u-form
label-width="200"
ref="uForm"
>
<u-form-item prop="houseLdh">
<template
name="label"
style="width: 200rpx;display: inline-block;"
>
<view
class="tooltip-target"
hover-class="tooltip-hover"
hover-stop-propagation="true"
>
楼幢号
</view>
<view class="tooltip-box chat-bubble-left">
<view class="tooltip-content">裙楼建筑或小区不存在楼幢号无需填写</view>
</view>
</template>
<view style="width: 480rpx;display: inline-block;">
<u-input placeholder="请输入数字" />
</view>
</u-form-item>
<u-form-item
label="单元号"
prop="houseDyh"
>
<u-input placeholder="请输入数字" />
</u-form-item>
</u-form>
</view>
</template>
<style>
.container {
position: relative;
}
.tooltip-target {
width: 200rpx;
padding: 10px;
/* border: 1px solid #ccc; */
display: inline-block;
}
.tooltip-box {
position: absolute;
left: 80px;
top: 10px;
visibility: hidden;
width: 520rpx;
color: #fff;
padding: 10px;
/* border: 1px solid #ccc; */
background-color: #262729;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(13, 12, 12, 0.2);
text-align: center;
z-index: 99;
opacity: 0.8;
}
.chat-bubble-left {
}
.chat-bubble-left:before {
content: '';
position: absolute;
width: 0;
height: 0;
left: -20px;
top: 18px;
border: 10px solid;
border-color: transparent #262729 transparent transparent;
}
.chat-bubble-left:after {
content: '';
position: absolute;
width: 0;
height: 0;
left: -16px;
top: 20px;
border: 8px solid;
border-color: transparent #262729 transparent transparent;
}
.tooltip-target:hover + .tooltip-box {
visibility: visible;
}
</style>
效果图