前端实现tooltip
前端 实现 tooltip
2023-06-13 09:13:04 时间
鼠标悬浮在问号图标上, 下方展示提示文本.
.tooltip {
margin: 8px;
padding: 8px;
border: 1px solid #CCCCCC;
background-color: #F6DBB3;
position: absolute;
z-index: 2;
}
.arrow-div {
position: absolute;
z-index: 3;
display: inline-block;
border-top: 1px solid;
border-right: 1px solid;
width: 8px;
height: 8px;
border-color: #CCCCCC;
transform: rotate(-45deg);
margin: 50px auto auto 100px;
background-color: #F6DBB3;
}
<i class="fa fa-question-circle-o" id="helpIcon" style="font-size: 24px; color: #D0CFCF; margin-left: 13px;"></i>
let changeTooltipPosition = function (event) {
let xy = $('#helpIcon').offset();
let tooltipX = xy.left - 180;
let tooltipY = xy.top + 35;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
$('div.arrow-div').css({top: tooltipY - 47, left: tooltipX + 87});
};
let showTooltip = function(event) {
let div = `<div class="arrow-div"></div><div class="tooltip">提示文本</div>`
$('div.tooltip').remove();
$('div.arrow-div').remove();
$(div).appendTo('body');
changeTooltipPosition(event);
};
let hideTooltip = function() {
$('div.tooltip').remove();
$('div.arrow-div').remove();
};
$("#helpIcon").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
相关文章
- Sublime Text 4 Dev Mac(前端代码编辑神器)
- 微前端05 : 乾坤loadMicroApp方法实现以及数据通信机制分析
- 前端序列帧动画实现
- 腾讯前端面试题
- 阿里前端高频面试题
- qml入门教程_前端从入门到放弃
- 前端实现异步的几种方式_redux是什么
- 熬夜整理前端高频面试题(已拿offer)
- 《前端Serverless:面向全栈的无服务架构实战》-- 1.Serverless综述(笔记)
- 美团前端一面必会手写面试题汇总
- 「后端小伙伴来学前端了」关于Vue中的自定义事件,组件绑定自定义事件实现通信
- 35·灵魂前端工程师养成-使用nodejs实现简单nginx功能
- 路由懒加载的原理及实现_前端路由懒加载
- 前端聊天功能如何实现_react使用websocket
- 记一次京东前端面试被问到的题目
- nginx前端跨域_nginx实现跨域
- 腾讯前端一面面试题总结_2023-02-27
- 回顾我眼里的前端十年
- 前端er开发cocos小游戏快速入门
- 前端错误捕获方案总结
- 2023前端二面react面试题(边面边更)
- 2023我的前端面试小结3
- 前端重新部署如何通知用户刷新网页?
- 前端报表如何实现无预览打印解决方案或静默打印
- 基于Vue3+TS的Monorepo前端项目架构设计与实现
- 构建初级前端页面重构开发环境
- 「前端曝光埋点上报」实现方案
- 「前端页面停留时长」统计上报方案
- [angularjs] 前端路由实现单页跳转详解编程语言
- SQLServer与前端交互:实现智能数据驱动应用(sqlserver与前端)
- 前端实现直接操作Redis(前端直接连redis)
- 开发重新定义前端开发Redis让你Say Goodbye(redis退出前端)