Tooltip Margin Breaks Mobile Layout
See original GitHub issueI implemented the slider with a tooltip. It seems like the margin on the tooltip is pushing out the overall width of the page, and causing horizontal scrolling on mobile.
When I look at the example (https://refreshless.com/nouislider/slider-options/#section-tooltips) the same margin is applied to the tooltip.
<div class="noUi-tooltip">166.34</div>
Is there a work-around for this? Removing the margin and setting a width seems to be a possible solution, but I’m not sure if there is a proper solution for this.
Issue Analytics
- State:
- Created 6 years ago
- Comments:18 (8 by maintainers)
Top Results From Across the Web
CSS - Align right hand margin to tooltip paragraph that line ...
The width of the text 'descriptions' is greater than the remaining space on right. It can't occupy that space. Hence it goes on...
Read more >Tooltip size and position on mobile - WordPress.org
When hovering on regions closer to the left/right edge of the screen, the tooltip gets cut off and so the contents can't be...
Read more >How to Display Tooltips on Mobile Forms - UX Movement
This means the tooltip icon must be as large as it can be without breaking the form layout. An icon that's too small...
Read more >Tooltips · Bootstrap v5.0
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title ...
Read more >What The Heck, z-index?? - Josh W Comeau
margin-left: 20px ; ... .tooltip has a much larger z-index than header ! ... We can map out the stacking contexts being created...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Apologies if you have spent time looking into this, I have discovered what the cause of the issue was.
The site that implements noUiSlider uses Wordpress with Angular2, the Angular2 app was importing noUiSlider (11.0.3) but was getting the CSS from the Wordpress part of the site, meaning the CSS that was loaded in was for version 10.1.0.
Once I updated my CSS file to version 11.0.3, I no longer had this issue.
Sorry if I’ve caused any inconvience!
Sorry for the delayed reply. This may have been a caching issue - but a strange one. I had cleared caches, etc, and was still an issue. Then 2 days later, I was working on another issue, the problem disappeared.