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

Question

I am using the Tooltips provided by 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):

$('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?

Thanks in advance

Answer 1

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

Answer 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.

Here's what you can use:

$('body').tooltip({

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

  }

/* other options*/
})

Answer 3

This is how I place my tooltip in 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.

Answer 4

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

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

Answer 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";
            },

        });

Answer 6

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

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