我需要一些關於javascript工具提示的幫助。我下面的代碼在懸停時效果很好,但我不能將該函數放在外面,因此可以通過單擊來調用它。在函數中,只有計算工具提示位置和顯示方式的東西,並且工作正常。Javascript工具提示懸停並點擊
非常感謝您的幫助。
var targets = $('[rel~=tooltip]'),
target = false,
tooltip = false,
title = false;
targets.on('mouseenter', function()
{
target = $(this);
tip = target.attr('title');
tooltip = $('<div id="tooltip"></div>');
if(!tip) {
return false;
}
target.removeAttr('title');
tooltip.css('opacity', 0)
.html(tip)
.appendTo('body');
var init_tooltip = function()
{
containerList = $('.container').find('.listImages');
if(containerList.width() < tooltip.outerWidth() * 1.5)
tooltip.css('max-width', containerList.width()/2);
else
tooltip.css('max-width', 340);
var pos_left = target.offset().left + (target.outerWidth()/2) - (tooltip.outerWidth()/2),
pos_top = target.offset().top + target.outerHeight(),
pos_right = target.offset().right + (target.outerWidth()/2) - (tooltip.outerWidth()/2);
console.log(pos_right)
if(pos_left < containerList.offset().left)
{
pos_left = target.offset().left;
tooltip.addClass('left');
}
else {
tooltip.removeClass('left');
}
if(pos_left + tooltip.outerWidth() > containerList.offset().left + containerList.width())
{
pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth();
tooltip.addClass('right');
}
else {
tooltip.removeClass('right');
}
if(pos_top < 0)
{
var pos_top = target.offset().top + target.outerHeight();
tooltip.addClass('top');
}
else {
tooltip.removeClass('top');
}
tooltip.css({ left: pos_left, top: pos_top })
.animate({ top: '+=10', opacity: 1 }, 50);
};
init_tooltip();
$(window).resize(init_tooltip);
var remove_tooltip = function()
{
tooltip.animate({ top: '-=10', opacity: 0 }, 50, function()
{
$(this).remove();
});
target.attr('title', tip);
};
target.bind('mouseleave', remove_tooltip);
});
jsfiddle會更好或至少你可以告訴現在發生了什麼 – zod