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>

效果图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/19376.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

跨境经营的艺术:中资企业海外市场售后服务创新与挑战

出海&#xff0c;已不再是企业的“备胎”&#xff0c;而是必须面对的“大考”&#xff01;在这个全球化的大潮中&#xff0c;有的企业乘风破浪&#xff0c;勇攀高峰&#xff0c;也有的企业在异国他乡遭遇了“水土不服”。 面对“要么出海&#xff0c;要么出局”的抉择&#xff…

一分钟学习数据安全——自主管理身份SSI基本概念

之前我们已经介绍过数字身份的几种模式。其中&#xff0c;分布式数字身份模式逐渐普及演进的结果就是自主管理身份&#xff08;SSI&#xff0c;Self-Sovereign Identity&#xff09;。当一个人能够完全拥有和控制其数字身份&#xff0c;而无需依赖中心化机构&#xff0c;这就是…

FreeRTOS实时系统 在任务中增加数组等相关操作 导致单片机起不来或者挂掉

在调试串口任务中增加如下代码&#xff0c;发现可以用keil进行仿真&#xff0c;但是烧录程序后&#xff0c;调试串口没有打印&#xff0c;状态灯也不闪烁&#xff0c;单片机完全起不来 博主就纳了闷了&#xff0c;究竟是什么原因&#xff0c;这段代码可是公司永流传的老代码了&…

香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试(三)

整期笔记索引 香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试&#xff08;一&#xff09; 香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试&#xff08;二&#xff09; 香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试&#xff08;…

【MySQL数据库】:MySQL复合查询

目录 基本查询回顾 多表查询 自连接 子查询 单行子查询 多行子查询 多列子查询 在from子句中使用子查询 合并查询 前面我们讲解的mysql表的查询都是对一张表进行查询&#xff0c;在实际开发中这远远不够。 基本查询回顾 【MySQL数据库】&#xff1a;MySQL基本查…

【测试】linux快捷指令工具cxtool

简介 登录linux时,我们经常需要重复输入一些指令. 这个工具可以把这些指令预置,需要的时候鼠标一点,会自动按预置的字符敲击键盘,敲击出指令. 下载地址 https://download.csdn.net/download/bandaoyu/89379371 使用方法 1,编辑配置文件&#xff0c;自定义自己的快捷指令。 2…

运算符重载(下)

目录 前置和后置重载前置的实现Date& Date::operator()代码 后置的实现Date Date::operator(int )代码 前置--和后置--重载前置--的实现Date& Date::operator--( )代码 后置--的实现Date Date::operator--(int )代码 流插入运算符重载流插入运算符重载的实现流提取运算…

任何图≌自己这一几何最起码常识推翻直线公理让R外标准实数一下子浮出水面

黄小宁 h定理&#xff1a;点集AB≌B的必要条件是A≌B。 证&#xff1a;若AB则A必可恒等变换地变为BA≌A&#xff0c;而恒等变换是保距变换。证毕。 如图所示R轴即x轴各元点x沿x轴正向不保距平移变为点y2x就使x轴沿本身拉伸&#xff08;放大&#xff09;变换为y2x轴不≌x轴&…

校园疫情防控|基于SprinBoot+vue的校园疫情防控系统(源码+数据库+文档)

校园疫情防控系统 目录 基于SprinBootvue的校园疫情防控系统 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2后台功能模块 5.2.1管理员功能 5.2.2学生功能 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#x…

Linux网络编程:传输层协议|UDP|TCP

知识引入&#xff1a; 端口号&#xff1a; 当应用层获得一个传输过来的报文时&#xff0c;这时数据包需要知道&#xff0c;自己应该送往哪一个应用层的服务&#xff0c;这时就引入了“端口号”&#xff0c;通过区分同一台主机不同应用程序的端口号&#xff0c;来保证数据传输…

【ai】pycharm安装github copilot解决chat一直无法初始化loading的问题

github copilot github-copilot 插件安装后:在工具里找到它 底部也有它 侧边可以chat 更新到2014.1.2copilot 也是最新但是chat 就是一直无法loading成功显示一直在初始化copilot中fix :

python基础-数据结构-int类型——你知道python的最大整数是什么吗?无限大?还是sys.maxsize?

文章目录 int底层源码最大整数推断 int底层源码 python 的int类型貌似并没有一个位数上线&#xff0c;然而我们知道其他语言的整数都是有位数&#xff0c;一般为32位或者64位等&#xff0c;那么python是怎么实现int类型没有位数限制的呢&#xff0c;下面这段代码是cpython仓库…

基于ELK的日志管理【开发实践】

文章目录 一、ELK简介1.1 ELK的作用与应用1.2 ELK的组成1.3 Elasticsearch1.4 Logstash1.5 Kibana1.6 ELK架构简述1.7 基础知识1.7.1 数据格式1.7.2 正排索引和倒排索引1.7.3 全文搜索 二、ES入门---基于HTTP的使用方式&#xff08;了解&#xff09;2.1 索引操作2.1.1 创建索引…

什么是网络流量监控系统?

目录 什么是网络流量监控系统&#xff1f; 网络流量监控系统的功能 实时监控 流量分析 故障排除 安全监控 IT运维中的网络流量监控系统应用案例 案例一&#xff1a;优化带宽使用 案例二&#xff1a;快速排除故障 案例三&#xff1a;提升网络安全 网络流量监控系统的…

04-树5 Root of AVL Tree(浙大数据结构PTA习题)

04-树5 Root of AVL Tree 分数 25 作者 陈越 单位 浙江大学 An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child subtrees of any node differ by at most one; if at any time they differ by more th…

将 vue文件转为字符串在Codemirror里面展示

第一种直接引入 import index from "./FFCesiumExample/basicOperationInterface/addIconMap.vue?raw"; index直接就是字符串。但是出现一个问题就是build的时候可以出警告&#xff0c;。so还有第二种 const readFile (filePath) > {// 创建一个新的xhr对象l…

dockers安装mysql

1.dockerhub上搜索自己需要安装得镜像版本 dockerhub网址&#xff1a;https://hub-stage.docker.com docker pull mysql:5.7 #下载自己需要得版本2.启动容器实例&#xff0c;并且挂载容器数据卷 docker run -d -p 3306:3306 --privilegedtrue \ -v /home/mysql/log:/var/log/…

python 构造函数

在Python中&#xff0c;构造函数是一个特殊的方法&#xff0c;用于在创建类的实例&#xff08;对象&#xff09;时自动调用&#xff0c;以初始化对象的属性。构造函数在类中是通过__init__方法来定义的。它的主要作用是为新创建的对象设置初始状态&#xff0c;即初始化对象的属…

基于react native的图片放大旋转效果二

基于react native的图片放大旋转效果二 const TaskReceiveModal ({ onClick }) > {const spinValue useRef(new Animated.Value(0)).current;const scaleValue useRef(new Animated.Value(0)).current;const spinAnimation useRef(null);const spin spinValue.interpol…

微服务架构-微服务治理基础

目录 一、服务治理由来 1.1 概述 1.2 微服务治理的几个维度 1.2.1 服务定义和SLA 1.2.2 服务注册中心 1.2.3 服务生命周期管理 1.2.4 服务通信和链路治理 1.2.5 服务授权和通信安全 二、服务治理的目标与愿景 2.1 服务治理的愿景 2.2 服务治理的目标 2.2.1 标准化 …