Dynamically position Bootstrap tooltip (for dynamically generated elements)

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 D

Answer 1

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

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

Answer 2

$(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.

Answer 3

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 4

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 5

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 6

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.