Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap tooltip not working when using the plugin for body tag #601

Closed
TanimMahbub opened this issue Jan 4, 2024 · 6 comments
Closed

Comments

@TanimMahbub
Copy link

First of all, awesome plugin, can't thank you and appreciate you enough, still learning it, but I can feel that it's the best for the purpose so far, because I have tried almost all of them.

Anyway, the issue is, when I added it to the body tag, the tooltips of the page stopped showing up, it's not like the markup of the tooltips is not generating, the markup is there generating just fine, but I can't see the tooltips, can't inspect either because the tooltips markup generates only when you're hovering over the trigger.

Add the Bootstrap and the OverlayScrollbars plugin to your page,
Activate the BS Tooltip and activate the OverlayScrollbars plugin for the body tag and any other element if you want
Now check if the Tooltip is working, you'll see it's not.
Now deactivate the OverlayScrollbars plugin for the body tag and now the Tooltip is working

Expected behavior
A clear and concise description of what you expected to happen.

Here is an example
Check this PEN to be more clear.

Environment

  • OS: Window 10
  • Used Browser: Google Chrome 120.0.6099.130
@KingSora
Copy link
Owner

KingSora commented Jan 4, 2024

@TanimMahbub good day :)

Thank you for your kind words, really appreciate it!

I'll take a look as soon as I have time.

@KingSora
Copy link
Owner

KingSora commented Jan 5, 2024

@TanimMahbub I've checked it out and I'm not sure whos "fault" this exactly is, but for some reason popper is caulculating the viewport size incorrectly (might be because of their code, or because of OverlayScrollbars styles).

The fix would be to apply this styles:

html[data-overlayscrollbars] {
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
}

I've done tests whether this breaks something and it seems that everything is working fine. In case I'll continue to observer this behavior I'll implement those styles in the next release which will be v2.5.0.

@TanimMahbub
Copy link
Author

Thank you so much @KingSora for the fix, it works perfectly now.
I'm working on a suggestion post for the plugin and will write that as soon as possible.

@KingSora
Copy link
Owner

KingSora commented Jan 5, 2024

@TanimMahbub Looking forward to that! You're welcome to share the link here when the post is finished :)

@TanimMahbub
Copy link
Author

I'm gonna make it as a Feature Request here, you'll see when post it.

@KingSora
Copy link
Owner

@TanimMahbub This workaround should not be needed anymore if you use overlayscrollbars v2.4.7 or higher :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants