Turning text into icon with content as tooltip with CSS only - html

Question

I'm trying to turn a hyperlink into an icon while turning the content text into a tooltip. The catch is I'm working in a place where I have only CSS to play with, and I can't modify the HTML or add any Javascript. I'm retrieving data from an external source in a table, and one of the columns is a hyperlink - this I want to transform into an icon with the text-content as a tooltip manner on hover.
Below snipped is how far I've gotten, is there any way of making the :hover part look, feel and behave more like a tooltip? Or is there perhaps another way completely to achieve what I'm after?
.external-link {
font-size: 0;
}
.external-link:after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:hover {
/* Well it shows the text, but it ain't pretty nor very functional.. */
font-size: initial;
}
Stack Overflow

Answer 1

It's a bit tricky, but it's achievable with modifying before and after pseudo-elements. You just have to write tooltip content in your content property, otherwise, you should modify your HMTL itself.
So your final code should be something like this:
.external-link {
font-size: 0;
}
.external-link::before {
content: 'Stack Overflow';
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
left: 40px;
z-index: 1;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.external-link::after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:hover.external-link::before {
/* Well it shows the text, but it ain't pretty nor very functional.. */
font-size: initial;
visibility: visible;
opacity: 1;
}
Stack Overflow

Answer 2

You can just edit your css like below. Just some idea. Not sure if you can write the tooltip text into css
.external-link {
font-size: 0;
position: relative;
}
.external-link:after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:before {
content: 'Text';
position: absolute;
display: inline-block;
height: auto;
padding: 2px 5px;
width: 100%;
display:none;
color: white;
font-size:initial;
background: #00000099;
bottom: -15px;
}
.external-link:hover:before {
/* Well it shows the text, but it ain't pretty nor very functional.. */
display:block;
}
Stack Overflow