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

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，它显示指向元素的Arrow。

我的问题是，我必须指定位置，所以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");
    }
}

看这个把它放在一起的地方。我很可能“作弊”在小提琴中产生那个elem变量。可能有一种典型的方法可以获得触发工具提示的元素，但我已经生疏了。