我一直在尝试制作自己的工具提示,这与您快速使用鼠标并移出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>
答案 0 :(得分:0)
我已经做过这样的事情,退出很容易。 这是我的脚本看看
(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>
答案 1 :(得分:0)
我走了另一条路。
我并不是说这是答案或正确的方法,但它确实有效。
但是,如果其他人也遇到类似的问题,我将在此处发布以供将来参考。
我更改了以下代码:
$('.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
});
});
收件人
$('body').on('mousemove', function(e){
var newX = e.pageX - 200;
var newY = e.pageY + 30;
$('.ubltool').css({
left: newX,
top: newY
});
if(e.target.classList.contains('table-pointer')){
$('.ubltool').show();
} else {
$('.ubltool').hide();
}
});
然后,我基本上删除了Mouseleave函数,并删除了show();。来自$('。ubltool')。html('tsteadasd')。show();
那已经纠正了我遇到的问题。