Get width of tooltip and calculate placement (Twitter Bootstrap)

Question

This is a follow up to my previous question.

I need to place Bootstrap tooltips dynamically. To do so, I need to know the position of the element which triggers the tooltip (works fine) AND the width of the tooltip which is supposed to show up:

Edit for clarification: My tooltips are generated dynamically and then inserted into the content. If they are, for example, too close to the left edge of the screen I need to place them 'right' instead of 'top'. Now I want to get the width of the tooltip to only place it 'right' when it would actually go out of the screen.

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    selector: '[rel=tooltip]:not([disabled])',
    placement: function(tip, element) {
        var offsetLeft = $(element).offset().left;
        var offsetRight = ( $(window).width() - ( offsetLeft + $(element).outerWidth() ) );

        // need help here: how to get the width of the current tooltip?
        // currently returns "0" for all elements
        var tooltipWidth = $(tip).outerWidth();
        console.log(tooltipWidth);

        if (offsetLeft < 220) {
            return 'right';
        }
        if (offsetRight < 220) {
            return 'left';
        }
        else {
            return 'top';
        }
    }
});

Thanks in advance.

why you need to place them dinamically while they are just placed automatically by bootstrap? — itsme, Nov 23 '12 at 10:16
if you need to change some tooltip position use css directly , new class and new css rule, maybe i didn't catched what you really need — itsme, Nov 23 '12 at 10:17
My tooltips are generated dynamically and then inserted into the content. If they are, for example, too close to the left edge of the screen I need to place them 'right' instead of 'top'. Now I want to get the width of the tooltip to only place it 'right' when it would actually go out of the screen. — maze, Nov 23 '12 at 10:28

davidkonrad · Accepted Answer · 2012-11-23T14:32:42.883

From a logically point of view it is impossible :) Think about it - the tooltip calls the placement function to get its position, and then it inserts the tip to the page and style it.

However, you can create a dummy-tip with the same features as the soon-to-come tip, and by that get the width. Like this :

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    placement: function(a, element) {

        //title is by tooltip moved to data-original-title
        var title=$(element).attr('data-original-title');

        //create dummy, a div with the same features as the tooltïp
        var dummy=$('<div class="tooltip">'+title+'</div>').appendTo('body');
        var width=$(dummy).width();
        dummy.remove();

        //now you have width 
        //..
        //..

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

Well, that makes sense. I've chosen another approach to position my tooltips in the meantime. But I guess I could achieve what I wanted this morning with your help :) Thanks again. — maze, Nov 23 '12 at 14:57

score 0 · Answer 2 · answered Dec 27 '16 at 06:03

0

You could use :

  var dummy = $('<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + title + '</div></div>').appendTo('body');

to get the exact div as tooltip div same height and width.

answered Dec 27 '16 at 06:03

Arjun

291
3
5

Get width of tooltip and calculate placement (Twitter Bootstrap)

2 Answers2