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

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

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

Solution 3

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*/
})

Solution 4

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

View more solutions

Comments

[technoTarek]

How do you intend to trigger the tooltip? Hover, click, other?

[maze]

The tooltips are triggered on hover for every element that has a "rel" attribute. This is the default bootstrap behaviour.

[Sindre]

Just one small comment on this question/answer. The if's doesn't make sense. The only way the tooltip can be placed at the bottom/top is if the position.left value is exactly 515. I do think it is intended to return "left bottom", "left top", "right bottom" and "right top", but if that is the case something has to be done with the if-statements