How to Create Tooltip with Icon

Now you can easily create Tooltip with Icon (Font Awesome). You can do it by using below HTML and CSS. If you get any issue or need help, you can do live chat with me.

If you are looking to include in Divi theme. This tutorial can be useful. Click here.

 

Monday, 8am - 8pm
Tuesday, 8am - 8pm
Wednesday, 8am - 8pm
Thursday, 8am - 8pm
Friday, 8am - 8pm
Saturday, 8am - 8pm

 

HTML Code

<div class="tooltip_wrap">
    <strong class="tooltip">
        <a href="https://www.chetanprajapati.com/"><i class="icon icon_clock"></i></a>
        <span class="tooltip-content">
            <span class="tooltip-text">
                <span class="tooltip-inner">
                    Monday, 8am - 8pm<br>
                    Tuesday, 8am - 8pm<br>
                    Wednesday, 8am - 8pm<br>
                    Thursday, 8am - 8pm<br>
                    Friday, 8am - 8pm<br>
                    Saturday, 8am - 8pm<br>
                </span>
            </span>
        </span>
    </strong>
</div>

CSS

.tooltip_wrap{
    text-align: center;
}
.tooltip { 
    display: inline-block; 
    position: relative; 
    z-index: 999; 
    font-size: 40px; 
    cursor: pointer; 
    color: #fff; 
    min-height: 60px;
}
.tooltip .icon{
    font-style: normal; 
    font-weight: 400;
}
.tooltip a{
    color: #fff !important;
}
.tooltip .icon:before{
    font-family: "FontAwesome"; 
    font-weight: 400;
}
.tooltip .icon_clock:before{
    content: "\f017";
}
.tooltip::after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 20px; 
    bottom: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
    -webkit-transform: translateX(-50%); 
}
.tooltip-content {
    position: absolute; 
    z-index: 9999; 
    width: 250px; 
    left: 50%; 
    transform: translateX(-50%); 
    -webkit-transform: translateX(-50%);
    top: 100%; 
    font-size: 14px; 
    font-weight: 400; 
    color: #fff; 
    background: transparent; 
    opacity: 0;
    pointer-events: none; 
    cursor: default; 
    -webkit-transition: opacity 0.3s 0.3s; 
    transition: opacity 0.3s 0.3s; 
}
.tooltip:hover .tooltip-content {
    pointer-events: auto; 
    opacity: 1; 
    -webkit-transition-delay: 0s; 
    transition-delay: 0s;

}
.tooltip-content span { 
    display: block;
}
.tooltip-text { 
    border-top: 10px solid #fff; 
    overflow: hidden; 
    -webkit-transform: scale3d(0,1,1); 
    transform: scale3d(0,1,1); 
    -webkit-transition: -webkit-transform 0.3s 0.3s; 
    transition: transform 0.3s 0.3s;
}
.tooltip:hover .tooltip-text { 
    -webkit-transition-delay: 0s;
    transition-delay: 0s; 
    -webkit-transform: scale3d(1,1,1); 
    transform: scale3d(1,1,1);
}
.tooltip-inner {
    background-color: #215A69; 
    padding: 10px 15px; 
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0); 
    -webkit-transition: -webkit-transform 0.3s; 
    transition: transform 0.3s;
}
.tooltip:hover .tooltip-inner { 
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s; 
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0); 
}
.tooltip-content::after {
    content: ''; 
    top: -20px; 
    left: 50%; 
    border: solid transparent; 
    height: 0;    
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    border-color: transparent; 
    border-bottom-color: #fff; 
    border-width: 10px; 
    transform: translateX(-50%); 
    -webkit-transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
    .tooltip-content{display: none;}
}