TheLazy.Dev
Portfolio GitHub

Blog

html |css |webdev |news

3 ways to display content on hovering over an element using only CSS

koustav

devkoustav

Posted on October 14, 2022

3 ways to display content on hovering over an element using only CSS

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.
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Check out the whole series!
Share itšŸ’š with someone who may benefit from this
ā¤ļø Happy Coding!
Follow for more!

šŸ’– šŸ’Ŗ šŸ™… šŸš©
koustav
devkoustav

Posted on October 14, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

3 ways to display content on hovering over an element using only CSS
html 3 ways to display content on hovering over an element using only CSS

October 14, 2022