我正在创建一个 jQuery 插件来显示工具提示。我想添加一个选项,toolitp 将充当下拉菜单。我的意思是,当我将光标移到工具提示上时,我可以单击该工具提示内的链接。问题是当我将光标移到工具提示上时,他消失了,在这种情况下不受欢迎。
JavaScript(示例):
(function($) {
$.fn.jTooltip = function(options) {
var defaults = {
'location': 'right',
'menu': false,
'className': 'default',
'content': 'tooltip content',
'top': 0,
'left': 0,
'overlay': false,
'zIndex': 2000
},
settings = $.extend({}, defaults, options);
this.each(function() {
var $this = $(this);
$this.mouseover(function() {
if (settings.menu) {
$(this).addClass('menu');
$(document).on('mouseleave', '.show-tip', function() {
$(".tip-top").remove();
});
}
if (settings.location == 'bottom') {
thisCss = {
'top': $this.offset().top + $this.innerHeight() + 10 + settings.top,
'left': $this.offset().left + settings.left,
'z-index': settings.zIndex
};
}
if (settings.location == 'right') {
thisCss = {
'top': $this.offset().top - $this.innerHeight() + 5 + settings.top,
'left': $this.offset().left + $this.innerWidth() + 5 + settings.left,
'z-index': settings.zIndex
};
}
$('<div id="jTooltip" />').appendTo('body').html(settings.content).addClass(settings.className).css(thisCss);
if (settings.overlay) {
$('<div id="overlay" />').appendTo('body').css({
'opacity': 0.5,
'background': '#000',
'position': 'absolute',
'left': 0,
'top': 0,
'z-index': 1000,
'width': '100%',
'height': '100%'
});
}
});
$(this).mouseleave(function() {
$("#jTooltip").remove();
});
return this;
});
};
})(jQuery);
$('.show-tooltip').jTooltip({
'location': 'bottom',
'menu': 'true'
});