Method 1 : Using <dfn>..</dfn> Tag in HTML with the title attribute and styling the title attribute with CSS
HTML
<dfn title="Official website is dev.to">Dev</dfn> is a community
of software developers getting together to help one another out.
The text(Here Dev) within the <dfn> tag will be in italic by default.
We will style title="Official website is dev.to" attribute to our requirements.
CSS
dfn[title] {
position: relative;
}
dfn[title]::after {
content: attr(title);
position: absolute;
display: block;
background-color: #121b22;
color: #c8cccf;
font-size: 16px;
bottom: 100%;
white-space: nowrap;
padding: 10px;
border-radius: 6px;
left: 30%;
transform: scale(0);
transition: ease-out 300ms;
}
dfn[title]:hover::after {
transform: scale(1);
}
Method 2 : Using Only Pseudo Elements ::before or ::after with Pseudo class :hover
We will display a text over the word dev.
HTML
<span id="dev-describe">Dev</span> is a community of software developers getting together to help one another out.
We will use this sequence -
element --> on hover --> display ::before or ::after
CSS
#dev-describe:hover::before {
content: "Official website is dev.to";
background-color: #ff746b;
color: #ffffff;
position: absolute;
bottom: 10px;
padding: 6px 12px;
border-radius: 6px;
}
And then position your content as per your requirements!
Method 3 : Using the attribute data-* for the element
HTML
<a href="https://dev.to/" data-explain="A community of software developers getting together to help one another out">Dev</a>
CSS
a[data-explain] {
position: relative;
}
a[data-explain]::after {
content: attr(data-explain);
position: absolute;
display: block;
background-color: #121b22;
color: #c8cccf;
font-size: 16px;
bottom: 100%;
white-space: nowrap;
padding: 10px;
border-radius: 6px;
left: 30%;
transform: scale(0);
transition: ease-out 300ms;
}
a[data-explain]:hover::after {
transform: scale(1);
}
Check out the whole series!
Share it💚 with someone who may benefit from this
❤️ Happy Coding!
Follow for more!
Top comments (5)
hey! it's nice 👌
can you do this for your upcoming CSS/any other language based ( just my request )
can you attach stackblitz / code-sandbox with your code?
Because I am really lazy to try this code.
If you do this, many developers like me will benefit ✨
Ok, I'll attach 👍🏻
Feeling something missing?
Put your suggestions in the comments 😄
I'll be happy to add your suggestions!
Did this post help you?
Save it for later...
lets_code_together
Curious about mobile behavior, as hover is problematic there. That's one of the reasons I stopped using it. Would love to hear how all are handling that successfully. I may have missed something ;)