Centering absolute element above relative parent element
Hi! So I've been scratching my head a bit, I'm making a tooltip that is position absolute that I want centered and above when hovering the icons, and the content of the tooltip is of varying length so I cannot set a static number to hack it.
This is the code for the tooltip :
.tooltip {
position: absolute;
bottom: calc(100% + 0.5rem);
left: 0;
right: 0;
width: fit-content;
padding: 4px 8px;
border-radius: 5px;
visibility: visible;
background-color: hsl(0, 0%, 65%);
color: hsl(0, 0%, 95%);
z-index: 1;
}
This is the code for the parent:
.language {
position: relative;
width: 32px;
}
and here's a screenshot of the behavior
2 Replies
left: 0 will place the left at the left side of the element it's positioned relative to. The right: 0 isn't really going to do anything at all, since the tooltip is probably always longer than the logo.
In this case, I'd remove the right change left: 0 to left: 50%, and then add transform: translateX(-50%)
The left: 50% will put the left side of the tooltip in the middle of the logo. The translateX is based on the size of the tooltip itself, so it moves back 50% of it's own width, which will center it horizontally.This worked great, I undestand now :). Thank you very much, super appreciated!