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

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