创建一个动态的jQuery工具提示

Question

我制作了一个jquery工具提示，但是有问题，当在链接“ ToolTip”框中输入鼠标时，在链接“ ToolTip”旁边的链接提示中没有显示该提示，如何设置呢？

演示： http ： //jsfiddle.net/uUwuD/1/

function setOffset(ele, e) {
    $(ele).prev().css({
        right: ($(window).width() - e.pageX) + 10,
        top: ($(window).height() - e.pageY),
        opacity: 1
    }).show();
}

function tool_tip() {
    $('.tool_tip .tooltip_hover').mouseenter(function (e) {
        setOffset(this, e);
    }).mousemove(function (e) {
        setOffset(this, e);
    }).mouseout(function () {
        $(this).prev().fadeOut();
    });
}
tool_tip();

Answer 1

像这样的作品，您仍然会遇到一个错误，即当新锚点悬停时，工具提示有时会消失。 我将让您解决此问题，或再提出其他问题。

function setOffset(ele, e) {
    var tooltip = $(ele).prev();
    var element = $(ele);
    tooltip.css({
        left: element.offset().left - element.width() - tooltip.width(),
        top: element.offset().top - tooltip.height(),
        opacity: 1
    }).show();
}

这是它的jsFiddle： http : //jsfiddle.net/uUwuD/4/

Answer 2

您需要计算窗口宽度并将其减去工具提示和偏移的宽度

 if(winwidth - (offset *2) >= tooltipwidth  + e.pageX){
                            leftpos = e.pageX+offset;
                    } else{
                        leftpos = winwidth-tooltipwidth-offset;
                    }

如果您想了解更多细节，请参考:)