Dynamically position Bootstrap tooltip (for dynami

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

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

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