I have added tooltips to some inline links on my portfolio website, but only the first one lines up properly from to the bottom of its container using bottom: 100%.
The others are a few pixels higher, and I've tried adjusting so many different things to see what's affecting the other two, but can't figure it out. When I apply a background color to the .tooltip-container spans, they are clearly the same height.
How do I correctly position these tooltips?
.container {
position: absolute;
top: 100px;
left: 100px;
font-family: Arial;
}
.tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip {
position: absolute;
bottom: 100%;
left: calc(50% - 70px);
background: #222;
color: white;
font-size: 11px;
line-height: 16px;
text-align: center;
justify-content: center;
align-items: center;
width: 120px;
padding: 5px 10px;
border-radius: 2px;
opacity: 0;
box-shadow: 2px 2px 6px rgba(29, 29, 29, 0.4);
z-index: 30;
transition: all .2s ease-in-out;
transform: scale(0);
}
.tooltip:before, .tooltip:after {
content: '';
position: absolute;
bottom: -10px;
left: calc(50% - 10px);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #222;
}
.tooltip-container:hover .tooltip, a:hover .tooltip {
opacity: 1.0;
transform: scale(1) translateY(-50%);
}<div class="container">
<p>© 2021 Caroline R. Jones •
<a href="" target="_blank">
<span class="tooltip-container">
LinkedIn
<span class="tooltip">
Visit my full profile
</span>
</span>
</a> |
<a href="" target="_blank">
<span class="tooltip-container">
HackerRank
<span class="tooltip">
View my badges and certificates
</span>
</span>
</a> |
<a href="" target="_blank">
<span class="tooltip-container">
GitHub
<span class="tooltip">
Check out my repos and contributions
</span>
</span>
</a>
</p>
</div>Here is the CodePen with just the relevant code isolated. It is behaving the same here as it does on the actual website.
CodePudding user response：
It's because the ones that are off by a few pixels have two rows of text. Hence, why the spacing is off. What I would do is set white-space: nowrap; on your tooltip so that they are all on one line. I also changed your fixed width of 120px to width: fit-content;
.container {
position: absolute;
top: 100px;
left: 100px;
font-family: Arial;
}
.tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip {
position: absolute;
bottom: 100%;
left: calc(50% - 70px);
background: #222;
color: white;
font-size: 11px;
line-height: 16px;
text-align: center;
justify-content: center;
align-items: center;
width: fit-content;
padding: 5px 10px;
border-radius: 2px;
opacity: 0;
box-shadow: 2px 2px 6px rgba(29, 29, 29, 0.4);
z-index: 30;
transition: all .2s ease-in-out;
transform: scale(0);
white-space: nowrap;
}
.tooltip:before, .tooltip:after {
content: '';
position: absolute;
bottom: -10px;
left: calc(50% - 10px);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #222;
}
.tooltip-container:hover .tooltip, a:hover .tooltip {
opacity: 1.0;
transform: scale(1) translateY(-50%);
}<div class="container">
<p>© 2021 Caroline R. Jones •
<a href="" target="_blank">
<span class="tooltip-container">
LinkedIn
<span class="tooltip">
Visit my full profile
</span>
</span>
</a> |
<a href="" target="_blank">
<span class="tooltip-container">
HackerRank
<span class="tooltip">
View my badges and certificates
</span>
</span>
</a> |
<a href="" target="_blank">
<span class="tooltip-container">
GitHub
<span class="tooltip">
Check out my repos and contributions
</span>
</span>
</a>
</p>
</div>CodePudding user response：
I'm really new to css, so apologies if this isn't correct, but it looks to be based on the font-size. I changed the font-size to about 8px, and everything worked as intended. So switching that back, in your final class, I have changed the translateY(-50%) from a percentage to a set number (in this case -1.5vh). This seems to have fixed the issue.
.tooltip-container:hover .tooltip, a:hover .tooltip {
opacity: 1.0;
transform: scale(1) translateY(-1.5vh);
}
.container {
position: absolute;
top: 100px;
left: 100px;
font-family: Arial;
}
.tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip {
position: absolute;
bottom: 100%;
left: calc(50% - 70px);
background: #222;
color: white;
font-size: 11px;
line-height: 16px;
text-align: center;
justify-content: center;
align-items: center;
width: 120px;
padding: 5px 10px;
border-radius: 2px;
opacity: 0;
box-shadow: 2px 2px 6px rgba(29, 29, 29, 0.4);
z-index: 30;
transition: all .2s ease-in-out;
transform: scale(0);
}
.tooltip:before, .tooltip:after {
content: '';
position: absolute;
bottom: -10px;
left: calc(50% - 10px);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #222;
}
.tooltip-container:hover .tooltip, a:hover .tooltip {
opacity: 1.0;
transform: scale(1) translateY(-1.5vh);
}<html>
<head>
<link href="./interface.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<p>© 2021 Caroline R. Jones •
<a href="" target="_blank">
<span class="tooltip-container">
LinkedIn
<span class="tooltip">
Visit my full profile
</span>
</span>
</a> |
<a href="" target="_blank">
<span class="tooltip-container">
HackerRank
<span class="tooltip">
View my badges and certificates
</span>
</span>
</a> |
<a href="" target="_blank">
<span class="tooltip-container">
GitHub
<span class="tooltip">
Check out my repos and contributions
</span>
</span>
</a>
</p>
</div>
</body>