'Bootstrap 3 Tooltip placement auto doesn't work

I can't make a Bootstrap 3 Tooltip to automatically change placement from right to left when getting closer to parent boundary:

$('.pic').on('mouseover', '.pin', function(e) {
  $(this).attr('title', 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz');
  $(this).tooltip({
    'placement': 'auto right',
    'boundary': $(this)
  });
  $(this).tooltip('show');
});

$('.pic').on('mouseout', '.pin', function(e) {
  $(this).tooltip('dispose');
});

See Fiddle: https://jsfiddle.net/0egk47n9/20/

jquerytwitter-bootstraptooltipplacement


Solution 1:[1]

Here is the solution: https://codepen.io/creativedev/pen/VdQgNW

$('.pic').on('mouseover', '.pin', function(e) {
    $(this).attr('title', 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz');
    $(this).tooltip({
        placement: function(tip, element) {
            var position = $(element).position();
            var cls = $(element).attr('class').split(/\s+/);
            if (cls[1].indexOf('right') > -1) {
                var d = "left";
            } else {
                var d = "right";
            }
            return d;
        },
    });
    $(this).tooltip('show');
});

Solution 2:[2]

I know I'm very late to this party, but I stumbled on this while looking for something else. The problem is that boundary isn't an option. What you want is viewport. So instead of 'boundary': $(this), set it to 'viewport': '.pic'.

See docs: https://getbootstrap.com/docs/3.3/javascript/#tooltips

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bhumi Shah
Solution 2 Joe Zim

Related Questions