Search code examples
javascriptbootstrap-4position

Bootstrap 4 tooltip/popover using auto placement as a fallback (two placement values)


Bootstrap 3 used to provide functionality to support data-placement="left auto" where it would show the tip on the left if there was enough room, otherwise it would calculate an auto placement.

Bootstrap 4 does not support two placement values, you can only provide left OR auto.

Any idea on how to achieve this in BS4? I was working off this comment along with looking at BS3.js source, but I am getting stuck trying to determine the 'current height/width' of the tooltip to be displayed and from BS3.js, what to use as the 'viewport' (I'm assuming the window object?)


Solution

  • Hmm...even thought Bootstrap 4/popper doesn't support the 'dual' placement values that Bootstrap 3 did, it seems to work as thought 'auto' was appended. i.e. if your placement is only 'left' but there isn't room, BS4/popper already moves it to make sure it displays. So I guess this is a non-issue. Surprised they even support an 'auto' placement. Seems like developers should always provide their 'desired' location and let popper 'fix' it if the viewport doesn't support it :)