Tooltips Disable Scrolling in Modals

[christianklemp-imt]

When tooltips are in a modal (triggered manually so they are constantly displayed) and the modal requires scrolling, when the cursor is over a tooltip, scrolling is disabled.

Fiddle here: https://jsfiddle.net/christianklemp_imt/2w7v77e5/

Running in Google Chrome (v60.0.3112.90) on macOS sierra (v10.12.6)

[Johann-S]

Confirmed with our last dist files : https://codepen.io/Johann-S/pen/yoVKMp?editors=1010#0

[jipexu]

is it the same case with popper.js ? as i see the example use tether.js ?

[Johann-S]

Mine use Popper.js @jipexu 😉

[jipexu]

ok

[gijsbotje]

adding pointer-events: none; to the tooltip enables the scrolling
https://codepen.io/gijsbotje/pen/WERNGR

[Herst]

@gijsbotje Unsupported in IE10 though, see https://caniuse.com/#feat=pointer-events (click "Show all") (maybe a reason for dropping support for it, as discussed e.g. in #21416).

[patrickhlauke]

@Herst don't confuse Pointer Events (the JS API) with pointer-events (the CSS property) (edit ah hang on, caniuse isn't working for me just now...maybe you were correctly pointing to the CSS property there and I jumped the gun. if so, ignore me :) )

[Herst]

@patrickhlauke I know that and I meant the CSS property and linked to the correct one, maybe I should have mentioned it.
(BTW, the link to Microsoft's JS API is https://caniuse.com/#feat=pointer and it's unlikely to be ever implemented in Webkit.)

[patrickhlauke]

as editor of the pointer events spec i'm aware of Apple's political position on the matter ;)

[ghost]

What's the problem here?

1. The tooltip is append as a direct child of the body.
2. When the modal is activated, the .modal-open class is added to the body tag.
3. The .modal-open class has the property overflow: hidden (deactivated scroll).
4. At the same time, the tooltip has the property position: absolute calculated in relation to the body, whose scrolling we have already seen that it is deactivated.
5. In short, when scrolling over the tooltip, it does not move because it has an absolute positioning on a container without scrolling. Visually it looks like the tooltip is inside the modal, but it's really outside.

Some possible solutions:

1. Add the tooltip to the same level of the trigger element. Popper.js has this configurable option (container). The problem here is that using the tooltip, for example, within an svg element, would not work. I tested it on the current visual test.

2. Add instructions to modal and tooltip documentation, indicating that tooltips located within modals must be properly configured. That is, indicating that the tooltip container should be the modal and not the body.

3. Add some code to the tooltips plugin so that it recognizes if any of its ancestors has the modal class and, in that case, auto-configure the container to the modal. The problem in this case is: what happens if the developer uses the Bootstrap tooltip plugin and a different library for modals? Note that Bootstrap allows partial import of css components and js plugins.

As there are several possible solutions, I did not want to work on this and instead put it to consideration.

[Johann-S]

Good catch @lucascono ! 👍
It seems it works too on SVG elements I added one on my CodePen

using container option fix this issue @christianklemp-imt see : https://getbootstrap.com/docs/4.0/components/tooltips/#options

and my updated CodePen : https://codepen.io/Johann-S/pen/yoVKMp?editors=1010

Should we add a special mention in our documentation ?

/CC @patrickhlauke , @mdo, @XhmikosR

[XhmikosR]

My main concern about SVGs is that this is non-standard. (Remember the other day on Slack I mentioned it)

I wonder what's the reasoning for not supporting SVGs with a title attribute in the root element.

[ghost]

I thought the same as @XhmikosR. In my opinion, option 1 seems the best. I had entered the visual test to prove just that option, but casually I found the SVG element. And then I decided to pause my work.

Putting the tooltips at the same level as your triggers would greatly facilitate the development, perhaps avoid future issues, and allow the operation with other external libraries. And implementing it is relatively simple: document.body should be changed to $(this.element).parent() in the container configuration of the plugin.

And I find it more usual to place a tooltip within a modal than within an SVG.

[Johann-S]

For now we will leave that like that, folks can use container options to bypass that issue, I prefer to add a mention in our documentation because that's not a common use case

[mdo]

Hella old issue, but in checking the linked CodePen from @Johann-S I don't see broken scrolling. Page scrolls fine before the tooltips are shown, and while they're shown. Closing as possibly fixed.