Question

我制作一个jquery工具提示，但是有问题，当鼠标进入linke“工具提示”框工具提示不显示在链接“工具提示”旁边它显示在上面的linke“工具提示”，怎么设置它？ / p>

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;
                    }

如果您想了解更多细节，请参阅：）

创建动态jquery工具提示

2 个答案: