动态定位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])'
});

#2

The placement option in docs allows for function . It isn't documented ( that I could find) what arguments are in the function. This is easy to determine however by logging arguments to console.

docs中的placement选项允许函数。它没有记录（我可以找到）函数中的参数。但是，通过将参数记录到控制台，很容易确定。

Here's what you can use:

这是你可以使用的：

$('body').tooltip({

   placement: function(tip, el){
     var position = $(el).position();
      /* code to return value*/

  }

/* other options*/
})

#3

This is how I place my tooltip in Bootstrap 2.3.2

这就是我将工具提示放在Bootstrap 2.3.2中的方法

placement: function (tooltip, trigger) {
    window.setTimeout(function () {
        $(tooltip)
            .addClass('top')
            .css({top: -24, left: 138.5})
            .find('.tooltip-arrow').css({left: '64%'});

        $(tooltip).addClass('in');
    }, 0);
}

Basically what I'm saying here is that my tooltip will be positioned on the top with some custom offset, also the little triangle arrow on the bottom will be slightly to the right.

基本上我在这里说的是我的工具提示将位于顶部，带有一些自定义偏移，底部的小三角箭头也会略微向右。

At the end I'm adding the in class which shows the tooltip.

最后我添加了显示工具提示的课堂内容。

Also note that the code is wrapped in setTimeout 0 function.

另请注意，代码包含在setTimeout 0函数中。

#4

This is shorthand that i use to determine window width is smaller 768 or not, then change tooltip placement from left to top:

这是我用来确定窗口宽度是否小于768的简写，然后从左到右更改工具提示位置：

placement: function(){return $(window).width()>768 ? "auto left":"auto top";}

#5

this one worked for me

这个对我有用

$("[rel=tooltip]").popover({
            placement: function(a, element) {
               var position = $(element).parent().position();
               console.log($(element).parent().parent().is('th:first-child'));

                if ($(element).parent().parent().is('th:last-child')) {
                    return "left";
                }
                if ($(element).parent().parent().is('th:first-child')) {
                    return "right";
                }
                return "bottom";
            },

        });

#6

$(element).position() will not work properly if the option container is set to the tooltip.

如果将选项容器设置为工具提示，$（element）.position（）将无法正常工作。

In my case, I use container : 'body' and have to use $(element).offset() instead.

在我的例子中，我使用容器：'body'，而不得不使用$（element）.offset（）。

#1