CSS Tooltip With Example Code

A tooltip is an information that you will able to see when you hover your mouse on a particular element. In this tutorial, I am going to show you how you can create your own tutorial using CSS.

CSS tooltip often used to display extra information about something when a user on the web page hover the mouse on an element. Making CSS tooltips is just a technique of using CSS.

CSS overflow property with value scroll to add scrollbar



Below is the given example of CSS tooltip:

<!DOCTYPE html>
<html>
<style>
.tooltip .tooltiptext {
    visibility: hidden;
    width: 130px;
    color: #ccc;
    background-color: green;
    text-align: center;
    position: absolute;
    z-index: 1;
}
.tooltip {
display: inline-block;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>


</body>
</html>

The above HTML code contains all the basic required CSS code to create a CSS tooltip. In the above code, we have created a container. Inside it, we have created a div element called “tooltiptext”. We keep it’s visibility hidden, but on mouse hover, we have made it visible.

Change text color on mouse hover – CSS code

CSS Moving Background Image Animation – CSS3 Source Code

Now test the above code on your browser and you will be able to see the tooltip information on mouse hover.

You have successfully created your own CSS tooltip. Now you can modify its position, text color or background color and many other things that perfectly suits you. It is very easy to do this task. If you have any other question regarding this post then you can comment on this post.

Leave a Reply

Your email address will not be published. Required fields are marked *