动态定位Bootstrap工具提示（用于动态生成的元素） [英] Dynamically position Bootstrap tooltip (for dynamically generated elements)

问题描述

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

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

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

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):

$('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";
}

如何正确地将currentElement传递给positionTooltip函数以返回相应的每个工具提示的贴装值？

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

提前致谢

推荐答案

Bootstrap使用包含元素的params调用placement函数

Bootstrap calls the placement function with params that includes the element

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])'
});

这篇关于动态定位Bootstrap工具提示（用于动态生成的元素）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！