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 👍🏻
Did this post help you?
Save it for later...
lets_code_together
Feeling something missing?
Put your suggestions in the comments 😄
I'll be happy to add your suggestions!
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 ;)