动态定位Bootstrap工具提示（用于动态生成的元素）

I am using the Tooltips provided by Twitter Bootstrap (http://twitter.github.com/bootstrap/javascript.html#tooltips).

我正在使用Twitter Bootstrap提供的工具提示（http://twitter.github.com/bootstrap/javascript.html#tooltips）。

I have some dynamically inserted markup in my DOM which needs to trigger the tooltips. That's why I trigger tooltips in the following way (https://github.com/twitter/bootstrap/issues/4215):

我的DOM中有一些动态插入的标记需要触发工具提示。这就是我以下列方式触发工具提示的原因（https://github.com/twitter/bootstrap/issues/4215）：

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    selector: '[rel=tooltip]:not([disabled])'
});

To avoid tooltips being placed too close to the edge of the screen, I need to be able to set their position dynamically based on where the element which triggers the tooltip is positioned. I thought of doing it the following way:

为了避免将工具提示放置得太靠近屏幕边缘，我需要能够根据触发工具提示的元素的位置动态设置它们的位置。我想到了以下方式：

   $('body').tooltip({
        delay: { show: 300, hide: 0 },
        // here comes the problem...
        placement: positionTooltip(this),
        selector: '[rel=tooltip]:not([disabled])'
    });



function positionTooltip(currentElement) {
     var position = $(currentElement).position();

     if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

     return "top";
}

How can I pass currentElement correctly to the positionTooltip function in order to return the appropriate placement value for each tooltip?

如何将currentElement正确传递给positionTooltip函数，以便为每个工具提示返回适当的放置值？

Thanks in advance

提前致谢

6 个解决方案

#1

Bootstrap calls the placement function with params that includes the element

Bootstrap使用包含该元素的参数调用放置函数

this.options.placement.call(this, $tip[0], this.$element[0])

so in your case, do this :

所以在你的情况下，这样做：

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    placement: function(tip, element) { //$this is implicit
        var position = $(element).position();
        if (position.left > 515) {
            return "left";
        }
        if (position.left < 515) {
            return "right";
        }
        if (position.top < 110){
            return "bottom";
        }
        return "top";
    },
    selector: '[rel=tooltip]:not([disabled])'
});

6 个解决方案

#1

更多相关文章

随机推荐