Question

所以我有以下代码：

$(document).tooltip
({
    tooltipClass: 'customToolTipTop',
    position: {my: 'center bottom', at: 'center top-10'},        
    content: function() 
    {
        var title = $(this).attr("title");

        if (title != null)
        {
            title = title.replace(new RegExp('\r?\n','g'), "<br />");
        }
        return title;
    }        
});

因此，这会将所有元素的工具提示设置为具有类自定义工具提示并位于元素的中心之上。这很好用。我也有css显示指向元素的箭头。

我的问题是我必须指定位置，所以css类。因此，如果元素靠近页面顶部，工具提示将显示在其下方，但箭头仍将指向下方。

有没有办法可以知道工具提示相对于元素的显示位置？

Answer 1

您可以在工具提示的open事件中添加一些代码（此时工具提示已准备好进行测量），以查看元素的offset().top是高于还是低于工具提示的offset().top。像这样的东西（elem是触发工具提示的东西）：

open: function(e,ui){
    var topOfToolTip = ui.tooltip.offset().top;
    if (elem.offset().top < topOfToolTip) {
        // Add a class or whatever
        ui.tooltip.addClass("top");
    }
}

见fiddle where it's all put together。我很可能＆＃34;作弊＆＃34;在小提琴中产生elem变量。可能有一种规范的方式来获取触发工具提示的元素，但我生锈了。

使用jQuery UI设置动态元素的工具提示的位置

1 个答案: