Create Stylish Custom CSS Tooltip using CSS3

In this tutorial, you will learn how to create a stylish custom CSS tooltip using only CSS. No JavaScript, No jQuery. The old school way of showing tooltips using the title attribute has been going out of the trend in web design.

HTML Template for Custom Tooltip:

<article class="container">
   <h1 class="heading">Custom CSS Tooltip Demo</h1>

   <p>    
      Welcome, Please <span class="text">Hover Me<span class="tooltip">Thank You!</span></span>
   </p>

   <p>      
      Welcome, Please <span class="text">Hover Me<span class="tooltip--two">Thank You!</span></span>
   </p>
</article>

The trick here is to create a span element, which will act like a tooltip, inside another span element. By default, we will hide the inner span element by using CSS3 visiblity: hidden;

Custom Stylish Tooltip in CSS3:

.text {
    text-decoration: underline;
    position: relative;
}

.text:hover {
    color: #292929;
}

The position property is set to relative in .text class, to become a parent container for the absolute positioned elements inside it.

Hide Tooltip:

/* tooltip style one */
.tooltip {
    visibility: hidden;
    position: absolute;
    opacity: 0;
    width: 100px;
    font-size: 16px;
    background: black;
    color: white;
    text-decoration: none;
    left: 1px;
    top: 34px;
    border-radius: 4px;
    padding: 5px;
    box-shadow: inset 3px 4px 3px #797979;
    text-align: center;
    transition: all 0.3s ease-in;
    z-index: 99;
}

/* Tooltip style two */
.tooltip--two {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: 100px;
    font-size: 16px;
    background: orange;
    color: white;
    text-decoration: none;
    right: -104px;
    top: -24px;
    border-radius: 50px;
    padding: 5px;
    text-align: center;
    transition: all 0.3s ease-in;
    border: 1px solid #dedede;
    z-index: 9999;
    box-shadow: 1px 2px 3px #dedede;
}

By default, We want to hide the tooltip so visibility: hidden; and opacity: 0; are added to the .tooltip class. The position: absolute; property is used to get the element out of the normal HTML layout flow. I added top and left property suitable for my layout needs. You have to customize the values of top, left, right and bottom based on your layout. The z-index property is needed to be on top in the stack order.

Arrow Style For CSS Tooltip:

/* arrow effect for tooltip style one */
.tooltip:before {
    content: " ";
    border-bottom: 10px solid #797979;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    width: 0;
    height: 0;
    position: absolute;
    top: -10px;
    left: 40px;
}

/* arrow effect for tooltip style two */
.tooltip--two:before {
    content: " ";
    border-top: 20px solid orange;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    width: 0;
    height: 0;
    position: absolute;
    bottom: -6px;
    left: -4px;
    transform: rotate(45deg);
    z-index: -98;
}

To create an arrow effect in our custom CSS tooltip styles, we should use a pseudo element :before in our .tooltip class. To understand the above CSS, Read this blog post Learn How to Create Arrows using CSS.

Show CSS Tooltip on Mouse Hover:

.text:hover .tooltip, .text:hover .tooltip--two {
    visibility: visible; 
    opacity: 1;
}

We show the tooltip only when the user hovers over the outer span element. In the above CSS, you can easily interpret what is happening under the hood, the .tooltipvisibility: hidden; property is changed to visibility: visible; as well as opacity: 0; to opacity: 1;.

Conclusion:

I hope the above tutorial helps you to create a stylish custom tooltip, share your creativity with us by making a comment below. Thank You!