我创建了一个 JQuery 工具提示插件，但我遇到了问题。
我需要能够将鼠标移到工具提示上...
我尝试使用 setTimeout 和 clearTimeout 来完成这项工作，但没有运气。
我在这里有一个工作版本：http: //www.codepen.io/mdmoura/pen/KdyJH
重要的代码在 Mouse Enter 事件的结尾和 Mouse Leave 事件中。
这是插件代码：
// JQuery
(function ($) {
// Tooltip
$.fn.Tooltip = function (options) {
var defaults = {
class: 'Tooltip',
content: '',
delay: [200, 200],
cursor: false,
offset: [0, 1],
hide: function ($element, $tooltip) {
$tooltip.fadeOut(200);
},
show: function ($element, $tooltip) {
$tooltip.fadeIn(200);
}
};
var options = $.extend({}, defaults, options);
var identity = "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000);
var info = { ready: false, shown: false, timer: null, title: '' };
$(this).each(function (e) {
var $this = $(this);
info.title = $this.attr('title') || '';
// Mouse enter
$this.mouseenter(function (e) {
if (info.ready) {
var $tooltip = $("#" + identity);
} else {
var $tooltip = $("<div>").attr("id", identity).attr("class", options.class).appendTo('body');
$tooltip.html(options.content != '' ? (typeof options.content == 'string' ? options.content : options.content($this, $tooltip)) : this.title);
info.ready = true;
$this.attr('title', '');
}
if (options.cursor) {
var position = [e.clientX + options.offset[0], e.clientY + options.offset[1]];
} else {
var coordinates = $this[0].getBoundingClientRect();
var position = [
(function () {
if (options.offset[0] < 0)
return coordinates.left - Math.abs(options.offset[0]) - $tooltip.outerWidth();
else if (options.offset[0] === 0)
return coordinates.left - (($tooltip.outerWidth() - $this.outerWidth()) / 2);
else
return coordinates.left + $this.outerWidth() + options.offset[0];
})(),
(function () {
if (options.offset[1] < 0)
return coordinates.top - Math.abs(options.offset[1]) - $tooltip.outerHeight();
else if (options.offset[1] === 0)
return coordinates.top - (($tooltip.outerHeight() - $this.outerHeight()) / 2);
else
return coordinates.top + $this.outerHeight() + options.offset[1];
})()
];
}
$tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' });
// HERE THE TOOLTIP IS DISPLAYED
timer = window.setTimeout(function () {
options.show($this, $tooltip.stop(true, true));
}, options.delay[0] || 0);
// THIS IS THE EVEN WHEN THE MOUSE MOVES OVER THE TOOLTIP.
// IT SHOULD CANCEL THE HIDE CALL OF THE TOOLTIP.
// AFTER THE MOUSE MOVES AWAY FROM THE "A" TAG THERE SHOULD BE A DELAY.
// THE DELAY WOULD ALLOW THE MOUSE TO MOVE TO THE TOOLTIP.
// IN THAT CASE THE HIDE CALL SHOULD BE CANCELED.
$("#" + identity).mouseenter(function() {
window.clearTimeout(timer);
timer = null;
});
// HERE THE TOOLTIP GETS HIDDEN WHEN THE MOUSE MOVES AWAY FROM IT
$("#" + identity).mouseleave(function () {
timer = setTimeout(function () {
options.hide($this, $tooltip);
}, options.delay[1]);
});
}), // Mouse enter
// HERE THE TOOLTIP GETS HIDDEN WHEN THE MOUSE MOVES AWAY FROM THE "A" TAG
// WHEN THE MOUSE MOVES OVER THE TOOLTIP THIS SHOULD BE CANCELED.
$this.mouseleave(function (e) {
window.clearTimeout(timer);
timer = null;
options.hide($this, $("#" + identity).stop(true, true));
}) // Mouse leave
}); // Each
}; // Tooltip
})(jQuery); // JQuery
请记住，我在以下位置有工作示例： http: //www.codepen.io/mdmoura/pen/KdyJH