Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
`overflow-x` on ref element parent causes incorrect position
See original GitHub issueHello, I’ve built Tippy.js tooltip with custom theme and custom HTML, it initially worked fine and looked like this:
Then, I needed padding on those list items. When I added them, I got this:
It isn’t positioned well anymore, it even has “x-placement: bottom”.
SCSS code:
.tippy-tooltip {
&.basic-tooltip-theme {
background-color: $color-brightest;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.12);
color: black;
padding: calculateRem(10px);
}
@at-root .tippy-popper {
pointer-events: all;
}
@at-root .tippy-popper[x-placement^=top] &.basic-tooltip-theme .tippy-arrow {
border-top: calculateRem(5px) solid $color-brightest;
border-right: calculateRem(4px) solid transparent;
border-left: calculateRem(4px) solid transparent;
bottom: -#{calculateRem(5px)};
margin: 0 calculateRem(9px);
}
@at-root .tippy-popper[x-placement^=bottom] &.basic-tooltip-theme .tippy-arrow {
border-bottom: calculateRem(5px) solid $color-brightest;
border-right: calculateRem(4px) solid transparent;
border-left: calculateRem(4px) solid transparent;
top: -#{calculateRem(5px)};
margin: 0 calculateRem(9px);
}
}
.tooltip-template {
text-align: left;
&__user-list {}
&__user-list-link {
@include transition(0.4, ease-in-out);
font-size: calculateRem(13px);
min-width: calculateRem(200px);
background-color: $color-brightest;
border-radius: 4px;
padding: calculateRem(10px);
display: block;
&:hover {
color: $color-brightest;
background-color: $color-main;
}
}
}
Custom HTML template code:
<div class="tooltip-template tooltip-template--user-header">
<ul class="tooltip-template__user-list">
<li><a class="tooltip-template__user-list-link">Domaćin</a></li>
<li><a class="tooltip-template__user-list-link">Objekt</a></li>
<li><a class="tooltip-template__user-list-link">Model rad</a></li>
</ul>
</div>
Also, that is application in which <body> doesn’t scroll, only that container where tooltip trigger is positioned. Don’t know if that has anything to do with issue.
Any help?
Issue Analytics
- State:
- Created 6 years ago
- Comments:14 (7 by maintainers)
Top Results From Across the Web
Can I position an element fixed relative to parent? [duplicate]
To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than...
Read more >overflow-x - CSS: Cascading Style Sheets - MDN Web Docs
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, ...
Read more >Overflow Issues In CSS - Smashing Magazine
Ads injected on page load can cause overflow if they're wider than their parent. Add overflow-x: hidden to the parent element to prevent...
Read more >Finding/Fixing Unintended Body Overflow - CSS-Tricks
Simplified, that would be like this: The solution, in this case, is to hide the overflow on a parent element, rather than relying...
Read more >Element size and scrolling - The Modern JavaScript Tutorial
We often need them when moving or positioning elements in JavaScript. ... but if there's a lot of text in the element and...
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
So this can be fixed with:
@atomiks this way tooltip will go out of window visible zone, better to use:
It’s work as clock