<html>
<body>
<div class="wrapper">
<p>Hello, playing around with tooltips! <a href="https://dev.to">Hover this link</a>. Each link will show you what their href is on hover. <a href="https://rosey.dev">Check out this one!</a></p>
<p>
Browser support isn't really happening yet but in theory you could eventually have attributes like <code>data-tooltip-background</code> to have different bg colors for different tooltips, or have a <code>data-tooltip-text</code> on links and fall back to href if it doesn't exist. You can read about that <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/attr">here</a>. It would look something like -
</p>
<code>
<pre>
a:hover::after {
content: attr(data-tooltip-text string, attr(href));
}
</pre>
</code>
<p>Thanks for visiting! This pen was created for the <a href="https://dev.to/mikister2012/css-challenges-2-tooltips-3f5d">tooltip css challenge</a>.</p>
</div>
</body>
</html>
@keyframes tooltip {
0% {
transform: scale(0) translateY(-110%);
opacity: 0;
}
100% {
transform: scale(1) translateY(-110%);
opacity: 1;
}
}
body {
padding: 50px;
font-family: sans-serif;
font-size: 18px;
background: white;
line-height: 1.5;
}
.wrapper {
width: 80%;
max-width: 500px;
margin: 0 auto;
}
a {
position: relative;
color: blue;
}
a:hover::after {
animation: tooltip 100ms ease-in forwards;
transform: translateY(-110%);
position: absolute;
content: attr(href);
background: rgba(0,0,0,.9);
top: 0;
left: 0;
right: 0;
width: fit-content;
margin: auto;
color: white;
padding: 2px 4px;
border-radius: 2px;
font-size: .7em;
}
code {
color: hotpink;
font-family: courier, monospace;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.