我创建了一个 JQuery 工具提示插件,并将其应用于一些 A 标签。
对于每个 A 标记,应该有一个与之关联的不同工具提示,所以我有:
var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body');
其中工具提示 id 包含按如下方式创建的随机数:
id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000)
该插件表现不佳。我检查了添加到页面的 HTML。
页面中只添加了一个工具提示...始终相同。
我怎样才能解决这个问题?我究竟做错了什么?我有一个例子:http ://codepen.io/mdmoura/pen/wgapv
插件代码如下:
$(document).ready(function () {
$("table a").Tooltip();
});
// Tooltip
(function ($) {
$.fn.Tooltip = function (options) {
var defaults = {
class: 'Tooltip',
delay: [200, 200],
offset: [0, -10],
hide: function ($element, $tooltip) {
$tooltip.fadeOut(200);
},
show: function ($element, $tooltip) {
$tooltip.fadeIn(200);
}
};
var options = $.extend({}, defaults, options);
var tooltip = { id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000), ready: false, timer: null, title: '' };
$(this).each(function (e) {
var $this = $(this);
tooltip.title = $this.attr('title') || '';
$this.mouseenter(function (e) {
if (tooltip.ready) {
var $tooltip = $("#" + tooltip.id);
} else {
var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body');
$tooltip.html(tooltip.title);
tooltip.ready = true;
$this.attr('title', '');
}
var position = [e.clientX + options.offset[0], e.clientY + options.offset[1]];
$tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' });
tooltip.timer = window.setTimeout(function () {
options.show($this, $tooltip.stop(true, true));
}, options.delay[0] || 0);
$("#" + tooltip.id).mouseenter(function () {
window.clearTimeout(tooltip.timer);
tooltip.timer = null;
}); // Tooltip enter
$("#" + tooltip.id).mouseleave(function () {
tooltip.timer = setTimeout(function () {
options.hide($this, $tooltip);
}, 0);
});
}), // Mouse enter
$this.mouseleave(function (e) {
tooltip.timer = setTimeout(function () {
options.hide($this, $("#" + tooltip.id).stop(true, true));
}, options.delay[1] || 0);
}) // Mouse leave
}); // Each
}; // Tooltip
})(jQuery); // JQuery
HTML如下:
<table>
<tr><td><a href="#" title="Tooltip 01 Text">Tooltip 01</a></td></tr>
<tr><td><a href="#" title="Tooltip 02 Text">Tooltip 02</a></td></tr>
<tr><td><a href="#" title="Tooltip 03 Text">Tooltip 03</a></td></tr>
<tr><td><a href="#" title="Tooltip 04 Text">Tooltip 04</a></td></tr>
<tr><td><a href="#" title="Tooltip 05 Text">Tooltip 05</a></td></tr>
</table>
谢谢!