I'm trying to get a tooltip box to be inserted on top and centered of an a tag. I have this working for small Text, but I can't seem to get it to center on large text.
I understand it has to do with positioning the box and the arrow but I can't seem to find the right combination to get the arrow centered under the box and the box centered above the a tag.
I'm hoping to accomplish this with just CSS alone.
HTML:
<div>
<a class="tooltip" href="#" title="tooltip">
<span>Text</span>
</a>
</div>
<div> <a class="tooltip" href="#" title="tooltip">
<span>TextTextText</span>
</a>
</div>
CSS:
div {
padding: 150px;
display: inline-block;
background-color: red;
}
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
padding: 10px;
left: -50%;
position: absolute;
z-index: 98;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 30%;
position: absolute;
z-index: 99;
}
And here is the fiddle.
I really would appreciate any help I can get.
If the tooltip doesn't have an explicit width
, you could align that horizontally center, by using a negative translateX
as follows:
.tooltip:hover:after {
left: 50%;
transform: translateX(-50%);
/* other styles ... */
}
.tooltip:hover:before {
left: 50%;
transform: translateX(-50%);
/* other styles ... */
}
div {
padding: 150px;
display: inline-block;
background-color: red;
}
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
text-decoration: none;
padding: 10px;
left: 50%;
transform: translateX(-50%);
position: absolute;
}
.tooltip:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
transform: translateX(-50%);
position: absolute;
}
<div>
<span class="tooltip" title="tooltip">
<a href="#">Work</a>
</span>
</div>
<div>
<span class="tooltip" title="tooltip">
<a href="#">Doesn't Work as hoped</a>
</span>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With