Tooltip placement does not work with a parent container has overflow: auto or overflow: scroll

[keenthemes]

The tooltip placement does not work with a parent container has overflow: auto or overflow: scroll. boundary: 'window' did not help either.

[GeoSot]

@KeenthemesHub can you provide an example replicating the problem using codepen?

[amarinediary]

@GeoSot I can confirm the issue. As @KeenthemesHub isn't answering I will takeover this bug report.

If the parent container is set to x/y overflox:scroll or x/y overflow:hidden;, the data-bs-placement will be ignored and fallback to default auto placement.

As per Bootstrap website documentation about tooltips:

Overflow auto and scroll

Tooltip position attempts to automatically change when a parent container has overflow: auto or overflow: scroll like our .table-responsive, but still keeps the original placement’s positioning. To resolve, set the boundary option to anything other than default value, 'scrollParent', such as 'window':

• Source @ https://getbootstrap.com/docs/5.0/components/tooltips/#usage

Specifying data-bs-boundary="window" won't work and the tooltip will still remain in default auto state.

On the following default case I have reproduced the issue i'm experiencing. data-bs-boundary="window" as been set, and even so, the tooltip still show either at the top or bottom position event tho data-bs-placement="right.
Here is a reduced test case

---

• macOS Mojave version 10.14.3 (18D109)
• Chrome version 89.0.4389.90 (Official Build) (x86_64)
• Bootstrap version 5.0.0-beta3

[amarinediary]

@GeoSot Any news on that subject ?

[GeoSot]

@rohit2sharma95 , can you help us here? 🧑‍🤝‍🧑

[jasonlewis]

When initialising with JavaScript you can use the following popperConfig to work around this, though it feels like it needs to be addressed either as docs or elsewhere.

popperConfig: function (config) {
  const flip = config.modifiers.find(({ name }) => name === 'flip')

  flip.options = {
    ...flip.options,
    boundary: 'window'
  }

  return config
}

[kadsyy]

This happen for dropdown in a table-responsive as well when there in only 1 row inside the table.

referring to @jasonlewis answer setting up altAxis to true in preventOverflow modifier might do the trick.

popperConfig: function(config) {
 const preventOverflow = config.modifiers.find(({ name }) => name === 'preventOverflow')

 preventOverflow.options = {
  ...preventOverflow.options,
  altAxis: true,
 }

 return config
}

I'm not sure if this a proper solution since when i'm using flip id does not change anything.

[alpadev]

I think we should review the Popper config in general.
I'm not experienced with Popper but from what I'm seeing there are flip and preventOverflow module both supporting a boundary option.

Currently we're setting boundary only for the preventOverflow module and I'm not sure if those settings are inherited or something. Also from my first investigation it looks like what causes problems for the OP is the flip module rather than preventOverflow.

Currently we're using this flip module together with altBoundary set to true (which is false by default). I wish the Popper docs would be a little bit more detailed about what every setting really does. Might be me, but I'm still not completely sure about which of them causes our problems.

altBoundary

This describes whether to use the alt element's boundary. For example, if the elementContext is "popper", then it will check the reference's boundary context, and vice-versa.

If I set altBoundary to false which is the default, the behaviour seem a little bit more like what the OP expected from what I can tell.

[rohit2sharma95]

I am a bit late here, but this is not an issue, instead, it is a feature of Popper. (Also this is not related to bootstrap)
boundary option is different for all modifiers of Popper and the user can not set the value for this option for all the modifiers (means for the whole Popper instance) at once. And seems that there is no intention of maintainers to do so for now, see this discussion here: floating-ui/floating-ui#1277

Thanks, @jasonlewis for posting the solution here and in #33579, that's not the workaround instead the proper way of changing the popperConfig directly. Even it is mentioned in the official docs as well: https://getbootstrap.com/docs/5.0/components/tooltips/#using-function-with-popperconfig

But setting the altBoundary option to true for the flip modifier is not needed here since the boundary should be checked for the tooltip element (that is popper) not for the button (that is reference element). The tooltip is appended to the body by default so there is no need to change the value for the boundary option in the flip modifier if we are not changing the value of the altBoundary option. Will create a PR for the same.

I hope this discussion is clear to you @amarinediary 🙂