Skip to main content

CSS Tooltip

CSS Tooltips are a great way to display extra information about something when the user moves the mouse cursor over an element.

Basic Tooltip​

<style>  
	/* Tooltip container */  
	.tooltip {  
		position:  relative;  
		display:  inline-block;  
		border-bottom:  1px dotted black;  /* If you want dots under the hoverable text */  
	}  
	  
	/* Tooltip text */  
	.tooltip .tooltiptext {  
		visibility:  hidden;  
		width:  120px;  
		background-color:  black;  
		color:  #fff;  
		text-align:  center;  
		padding:  5px 0;  
		border-radius:  6px;  
	/* Position the tooltip text - see examples below! */  
		position:  absolute;  
		z-index:  1;  
	}  
	  
	/* Show the tooltip text when you mouse over the tooltip container */  
	.tooltip:hover .tooltiptext {  
		visibility:  visible;  
	}  
</style>  
  
<div class="tooltip">Hover over me  
	<span class="tooltiptext">Tooltip text</span>  
</div>

Tooltip positioning​

By using tooltips, you can display the position of the tooltip information in four ways:

  • Top of the element
  • Left side of the element
  • Right side of the element
  • Bottom of the element

Top Tooltip​

The top tooltip specifies that if you move your mouse cursor over the element, the tooltip information will be displayed on the top of the element.

/* Tooltip text */  
.tooltip .tooltiptext {  
	visibility:  hidden;  
	width:  120px;  
	background-color:  black;  
	color:  #fff;  
	text-align:  center;  
	padding:  5px 0;  
	border-radius:  6px;  
	
	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	margin-left: -60px;  
	/* Use half of the width (120/2 = 60), to center the tooltip */ 
}

Example top tooltip

Bottom Tooltip​

The bottom tooltip specifies that if you move your mouse cursor over the element, the tooltip information will be displayed on the bottom of the element.

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
  /* Use half of the width (120/2 = 60), to center the tooltip */ 
}

Example bottom tooltip

Left Tooltip​

The left tooltip specifies that if you move your mouse cursor over the element, the tooltip information will be displayed on the left side of the element.

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}

Example left tooltip

Right Tooltip​

The right tooltip specifies that if you move your mouse cursor over the element, the tooltip information will be displayed on the right side of the element.

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

Example right tooltip

Tooltip with Arrows​

To create an arrow that should appear from a specific side of the tooltip, add "empty" content after tooltip, with the pseudo-element class ::after together with the content property. The arrow itself is created using borders. This will make the tooltip look like a speech bubble.

Tooltip with Top Arrow​

.tooltip .tooltiptext::after {  
	content:  " ";  
	position:  absolute;  
	bottom:  100%; /* At the top of the tooltip */  
	left:  50%;  
	margin-left:  -5px;  
	border-width:  5px;  
	border-style:  solid;  
	border-color:  transparent transparent black transparent;  
}

Example bottom arrow tooltip

Explanation:

  • Position the arrow inside the tooltip: bottom: 100% will place the arrow at the top of the tooltip. left: 50% will center the arrow.
  • The border-color is used to transform the content into an arrow. We set the top border to black, and the rest to transparent. If all sides were black, you would end up with a black square box.
note

The border-width property specifies the size of the arrow. If you change this, also change the margin-left value to the same. This will keep the arrow centered.

Tooltip with Bottom Arrow​

.tooltip .tooltiptext::after {  
	content:  " ";  
	position:  absolute;  
	top:  100%;  /* At the bottom of the tooltip */  
	left:  50%;  
	margin-left:  -5px;  
	border-width:  5px;  
	border-style:  solid;  
	border-color:  black transparent transparent transparent;  
}

Example bottom arrow tooltip

Tooltip with Left Arrow​

Add an arrow to the left of the tooltip

.tooltip .tooltiptext::after {  
	content:  " ";  
	position:  absolute;  
	top:  50%;  
	right:  100%;  /* To the left of the tooltip */  
	margin-top:  -5px;  
	border-width:  5px;  
	border-style:  solid;  
	border-color:  transparent black transparent transparent;  
}

Example left arrow tooltip

Tooltip with Right Arrow​

Add an arrow to the right of the tooltip

.tooltip .tooltiptext::after {  
	content:  " ";  
	position:  absolute;  
	top:  50%;  
	left:  100%;  /* To the right of the tooltip */  
	margin-top:  -5px;  
	border-width:  5px;  
	border-style:  solid;  
	border-color:  transparent transparent transparent black;  
}

Example right arrow tooltip

Fade In Tooltips (Animation)​

If you want to fade in the tooltip text when it is about to be visible, you can use the CSS transition property together with the opacity property, and go from being completely invisible to 100% visible, in a number of specified seconds (1 second in our example):

.tooltip .tooltiptext {  
	opacity:  0;  
	transition:  opacity 1s;  
}  
  
.tooltip:hover .tooltiptext {  
	opacity:  1;  
}

Table of Contents