jquery - 使用jquery检查是否没有将鼠标悬停在元素上
问题描述
我一直在尝试制作我自己的工具提示,除了你用鼠标快速移动并移出工具提示仍然显示的 div 之外,它的效果很好。
与此有关的问题是工具提示跟随光标,因此如果您不在其预期的元素上方,则会很烦人。
如果您快速执行此问题,那么它不会触发隐藏工具提示的 mouseleave 函数。
jQuery(document).ready(function($) {
"use strict";
function tooltipHover() {
$('.table-pointer, .ajax-table-pointer').mouseover(function() {
//const year = $(this).attr('data-y');
// const month = $(this).attr('data-m');
//const qid = $(this).attr('data-q');
//var invoiceFormData = {
// 'type': 2,
// 'year': year,
// 'month': month,
// 'qid': qid
//};
//$.ajax({
// type: 'POST',
// url: '/Applications/Controllers/Tracker/ajax.php',
// data: invoiceFormData,
// dataType: 'html',
// encode: true
// }).done(function(data) {
// $('.ubltool').html(data).show();
// });
//commented this out because I can not call through this
$('.ubltool').html('tsteadasd').show();
}).mouseleave(function() {
$('.ubltool').hide();
});
}
$('.table tr td.table-pointer, .table tr td.ajax-table-pointer').on('mousemove', function(e) {
var newX = e.pageX - 200;
var newY = e.pageY + 30;
$('.ubltool').css({
left: newX,
top: newY
});
});
tooltipHover();
});
.table{width:80%;margin:200px 10%;}
.ubltool {
position: fixed;
width: auto;
height: auto;
border-radius: 3px;
background-color: #f0f0f0;
box-shadow: 0 0 3px 4px rgba(0, 0, 0, 0.1);
top: 49%;
left: 48.85%;
padding: 10px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<td class="table-pointer">Here</td>
<td>Here</td>
<td>Here</td>
<td class="table-pointer">Here</td>
<td class="table-pointer">Here</td>
<td>Here</td>
<td class="table-pointer">Here</td>
</tr>
<tr>
<td class="table-pointer">Here</td>
<td>Here</td>
<td>Here</td>
<td>Here</td>
<td>Here</td>
<td class="table-pointer">Here</td>
<td>Here</td>
</tr>
<tr>
<td class="table-pointer">Here</td>
<td>Here</td>
<td>Here</td>
<td class="table-pointer">Here</td>
<td>Here</td>
<td>Here</td>
<td class="table-pointer">Here</td>
</tr>
<tr>
<td>Here</td>
<td>Here</td>
<td>Here</td>
<td class="table-pointer">Here</td>
<td class="table-pointer">Here</td>
<td>Here</td>
<td >Here</td>
</tr>
<tr>
<td>Here</td>
<td class="table-pointer">Here</td>
<td>Here</td>
<td>Here</td>
<td>Here</td>
<td>Here</td>
<td class="table-pointer">Here</td>
</tr>
<tr>
<td class="table-pointer">Here</td>
<td>Here</td>
<td>Here</td>
<td>Here</td>
<td>Here</td>
<td>Here</td>
<td class="table-pointer">Here</td>
</tr>
</tbody>
</table>
<div class="ubltool"></div>
解决方案
我已经做过这样的事情,而且很容易。这是我的脚本看看
(function ($) {
$.toolTipIni = function () {
function build() {
// Get all span, input, li that have title
var items = $("span[title]:not([title='']):visible,a[title]:not([title='']):visible,div[title]:not([title='']):visible,input[title]:not([title='']):visible,li[title]:not([title='']):visible");
$(items).each(function () {
var o = $(this);
var title = o.attr("title");
if (title && title != "" && !o.is(":hidden")) {
var offset = this.getBoundingClientRect();
o.attr("title", "");
o.addClass("tooltips");
var toolSpan = $("<span class='toolSpan'>" + title + "</span>");
toolSpan.css({
top: (offset.top + offset.height) + 10,
left: offset.left + (offset.width / 2)
});
o.append(toolSpan);
toolSpan.hide();
var timeOut = undefined;
o.mouseover(function (e) {
var offset = o[0].getBoundingClientRect();
clearTimeout(timeOut);
timeOut = setTimeout(function () {
toolSpan.css({
left: e.clientX,
top: e.clientY + 10
});
toolSpan.show();
}, 800); // wait before showing ths tooltip
}).mouseout(function () {
clearTimeout(timeOut);
toolSpan.hide();
});
}
});
setTimeout(build, 100);
}
build();
}
}(jQuery));
$(document).ready(function(){
// simple start the tooltip
// you could modify it to your need
$.toolTipIni();
});
.tooltips {
/*position: relative;*/
/*display: inline;*/
}
.tooltips > span.toolSpan {
position: fixed;
width: auto !important;
color: #FFFFFF;
background: #000000;
height: auto !IMPORTANT;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
padding-left: 10px;
padding-right: 10px;
font-size: 12px !important;
font-weight: normal !important;
}
.tooltips > span.toolSpan:after {
content: '';
position: absolute;
bottom: 100%;
left: 16%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.tooltips:hover.tooltips > span.toolSpan {
visibility: visible;
opacity: 0.8;
top: 30px;
left: 50%;
/*margin-left: -76px;*/
z-index: 999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span title="this is a test">hover here</span>
推荐阅读
- android - 如何在导航活动中设计一个具有 3 种不同样式的卡片视图的回收视图?
- javascript - 如何实例化要在单元测试中使用的 Sequelize 模型?
- python - 计算 p-tags 的数量 (
) 在用户选择的 Python 3 中的链接输入的网站中
- php - 删除多级菜单中的子项
- html - 使用 flexbox 和 100% 高度
- django - Docker 中的 Django 服务器
- ios - 任务失败,退出 1 信号 0 {
- gitlab-ci - Gitlab Runner 删除 dist 文件夹
- c# - 什么是可以处理代理对的 String.IndexOf(string input) 的 Unicode 安全副本?
- css - 如何在 Angular 5 中对子组件的输入字段应用条件 CSS?