3

I'm using Bootstrap's tooltip plugin, and am having trouble getting data-placement="auto bottom" to work. Using data-placement="bottom" works as intended though. Here is what my element looks like:

<button class="tooltip-icon btn-icon tooltip-trigger" title="Enter Address" data-placement="auto bottom">
  <svg class="icon help">
    <use xlink:href="#help"/>
  </svg>
</button>

The above causes the tooltip's placement to be top. I also changed the DEFAULT placement value in the JS:

  Tooltip.DEFAULTS = {
    animation: true,
    placement: 'auto bottom',
    selector: false,
    template: '<div class="bootstrap-tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
    trigger: 'hover focus',
    title: '',
    delay: 0,
    html: false,
    container: false,
    viewport: {
      selector: 'body',
      padding: 0
    }
  }

Here is how I am initializing: $('.tooltip-trigger').tooltip();

Why isn't the auto placement working as intended?

Ralph David Abernathy
  • 5,230
  • 11
  • 51
  • 78
  • 1
    It seems like 'auto bottom' works fine with bootstrap v3.2.0 but not with latest version: [https://github.com/twbs/bootstrap/issues/13934](https://github.com/twbs/bootstrap/issues/13934) – Chitrang Aug 16 '16 at 18:52
  • @Chitrang Thanks for that find. I tried with v3.2.0 (https://github.com/twbs/bootstrap/blob/dca8afa333f47dcdaf44162d66a0ac18f9ea126b/js/tooltip.js) but it still does not work correctly. – Ralph David Abernathy Aug 16 '16 at 19:24
  • Hmm.. can you share jsFiddle for your code? In the link above, they have given [jsFiddle](http://jsfiddle.net/77ak3/1/) where it works fine. – Chitrang Aug 16 '16 at 19:29
  • @Chitrang I tried with this codepen: http://codepen.io/obliviga/pen/QEoKKw?editors=1010 and it works fine in the CodePen, but not my site. I am initializing the same way, but on my site, the placement auto functionality is not working. I'm using the same tooltip.js file in both areas. Any ideas? – Ralph David Abernathy Aug 17 '16 at 11:55
  • No idea about that. – Chitrang Aug 18 '16 at 20:05
  • @Chitrang Looks like jQuery UI was conflicting with the bootstrap's tooltip JS. Should I close the question? – Ralph David Abernathy Aug 18 '16 at 20:08
  • You could keep it like this if you want. That way everyone can see and provide any input if they have any. It is up to you ultimately. – Chitrang Aug 18 '16 at 20:17

1 Answers1

2

When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto bottom", the tooltip will display to the bottom when possible, otherwise it will display top.

thevarunraja
  • 326
  • 3
  • 8
  • That is not true. Quoting from the documentation: "How to position the tooltip - top | bottom | left | right | auto. When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right." Source: http://getbootstrap.com/javascript/#tooltips – Ralph David Abernathy Aug 16 '16 at 18:58
  • 1
    You are right. thanks for correcting me. sorry for the wrong answer. – thevarunraja Aug 16 '16 at 20:36
  • According to the documentation When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right. – thevarunraja Aug 16 '16 at 20:37