How To Create Tooltips Using CSS3

Tagged: CSS, CSS3

This topic has 0 replies, 1 voice, and was last updated 1 week ago by Chinomnso.

Viewing 1 post (of 1 total)

Author

Posts

November 29, 2019 at 9:21 am #81302

Chinomnso

Participant

@chinomnso-ugwuanya

Tooltips are helpful when you want to explain to your users how to use features of your website. They can be added to form fields or other elements on a web page. This article explains how to implement tooltips using CSS3. Let’s dive right in and start writing code.

<div class = "mytooltip">
   Here's an example of a tooltip. You can put anything you want here, even images.
</div>

Here's an example of a tooltip. You can put anything you want here, even images.

</div>

The code above is the markup for what we are doing. The text in the <p> . . .</p> tag will be rendered as the text in the tooltip, but it will be hidden until a user places their mouse over the tooltip div with the “mytooltip” class. Interestingly, anything can be placed within the paragraph tag including images. Here’s the CSS for the markup above.

<style type="text/css">
.mytooltip{
    cursor: default;
    position: absolute;
    top: 20px;
    right: 18px;
    background-color: #BCDBEA;
    border-radius: 50%;
    font-size: 20px;
    width: 24px;
    height: 24px;
    line-height: 26px;
    text-align: center;
}

.mytooltip-h{
    position: absolute;
    top: 18px;
    right: 18px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 20%;
    width: 30px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.mytooltip:before{
    color:#fff;
    content:'?';
    font-weight: bold;
}
.mytooltip-h:before{

    color:#fff;
    content:'help';
    font-weight: bold;
}

.mytooltip:hover p, .tooltip-h:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.4s ease-in-out;
    animation: fadeIn 0.4s ease-in-out;

}

.mytooltip p, .tooltip-h p{    
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 20px;
    width: 350px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.mytooltip p:before, .tooltip-h p:before{ 
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:5px solid transparent;
    top:-12%
    border-bottom-color:#1E2021;
    right:10px;
}

.mytooltip p:after, tooltip-h p:after{ 
    height:50px;
    content:'';
    position: absolute;
    top:-50px;
    left:0;
    width:100px;
}



#content {
    background-color: #428bca;
    border-radius: 5px;
    margin: 0 auto;
    max-width: 600px;
    position: relative;
    margin: 0 auto 100px;
}

</style>

.mytooltip{

cursor: default;

position: absolute;

top: 20px;

right: 18px;

background-color: #BCDBEA;

border-radius: 50%;

font-size: 20px;

width: 24px;

height: 24px;

line-height: 26px;

text-align: center;

}

.mytooltip-h{

position: absolute;

top: 18px;

right: 18px;

text-align: center;

background-color: #BCDBEA;

border-radius: 20%;

width: 30px;

height: 24px;

font-size: 14px;

line-height: 26px;

cursor: default;

}

.mytooltip:before{

color:#fff;

content:'?';

font-weight: bold;

}

.mytooltip-h:before{

color:#fff;

content:'help';

font-weight: bold;

}

.mytooltip:hover p, .tooltip-h:hover p{

display:block;

transform-origin: 100% 0%;

-webkit-animation: fadeIn 0.4s ease-in-out;

animation: fadeIn 0.4s ease-in-out;

}

.mytooltip p, .tooltip-h p{

display: none;

text-align: left;

background-color: #1E2021;

padding: 20px;

width: 350px;

position: absolute;

border-radius: 3px;

box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

right: -4px;

color: #FFF;

font-size: 13px;

line-height: 1.4;

}

.mytooltip p:before, .tooltip-h p:before{

position: absolute;

content: '';

width:0;

height: 0;

border:5px solid transparent;

top:-12%

border-bottom-color:#1E2021;

right:10px;

}

.mytooltip p:after, tooltip-h p:after{

height:50px;

content:'';

position: absolute;

top:-50px;

left:0;

width:100px;

}

#content {

background-color: #428bca;

border-radius: 5px;

margin: 0 auto;

max-width: 600px;

position: relative;

margin: 0 auto 100px;

}

</style>

Simply copying the code blocs and pasting them would get your tooltips up and running. You can tweak it to your taste, changing the colors, animation speed, or whatever you want.
Notice the line where we have content:?. The question mark there is the text over which the users will hover to reveal the tooltip. You can change it to anything you wish.
If you want to add an animation to the tooltip, it is possible. The following block of code adds fade-in and fade-out effects to the tooltip display. You can copy it and paste it to your code.

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.9);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}

@-webkit-keyframes fadeIn {

0% {

opacity:0;

transform: scale(0.9);

}

100% {

opacity:100%;

transform: scale(1);

}

@keyframes fadeIn {

0% { opacity:0; }

100% { opacity:100%; }

}

Author

Posts

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.