Create a Tooltip Using CSS

Tooltip is used to view the information of an image or anchor text when mouse is hovered. 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>

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;
}