Home » Support » Help Articles » Create a Tooltip Using CSS

Create a Tooltip Using CSS

Back to Help Articles Home


Tooltip is used to view the information of an image or anchor text when mouse is hovered. Tooltip provides information of captions of images or longer description of a text. This article will walk you through how to create a tooltip using CSS.

Step 1: Create a Simple Anchor Tag.

To create the anchor tag use the following code.

<a href="#" title="This is my first tooltip" class="mytooltip">My CSS Tooltip</a>

Figure One

Step 2: Add Some Simple Styling to Display the Tooltip.

To add styling to your tooltip, add the code below to the head section of your html page. The code below will display the tooltip with the link using relative positioning.

.mytooltip
{
	display: inline;
	position: relative;
}

Step 3: Create a Body of Tooltip.

  • To create the body of tooltip, add the code below to the head section of your html page. Here, we are using the ":hover" selector which selects an element, on mouseover and the :after selector, which inserts the content after the selected element.

    .tooltip:hover:after
    {
    	background: #000;
    	border-radius: 10px;
    	bottom: 20px;
    	color: #fff;
    	content: attr(title);
    	left: 15%;
    	padding: 15px 15px;
    	position: absolute;
    	z-index: 100;
    	width: 320px;
    	opacity:0.7;
    	text-align:center;
    }
    



  • Updated on Aug 31, 2016

    The techReview is an online magazine by Batoi and publishes articles on current trends in technologies across different industry verticals and areas of research. The objective of the online magazine to provide an insight into cutting-edge technologies in their evolution from labs to market.

    Visit techReview


    English - IN (USD)
    New Users? Signup.     Existing Users? Login.