uniapp的tooltip功能放到表单laber

本文主要是介绍uniapp的tooltip功能放到表单laber，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在uniapp中，tooltip功能通常是通过view组件的hover-class属性来实现的，而不是直接放在form的label上。hover-class属性可以定义当元素处于hover状态时的样式类，通过这个属性，可以实现一个类似tooltip的效果。

以下是一个简单的例子，展示如何在uniapp中使用hover-class来实现一个tooltip效果：

<template><view class="container"><u-formlabel-width="200"ref="uForm"><u-form-item prop="houseLdh"><templatename="label"style="width: 200rpx;display: inline-block;"><viewclass="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-itemlabel="单元号"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>