Create CSS tooltip for all positions

Sometime we can't show all of the contents, and use a tooltip to specify extra content when the user moves the mouse pointer over an element.
In this article, we'll create all tooltip positions (Top, left, right and bottom ) with HTML and CSS.

- Copy and paste CSS code below into your CSS file:

         .tooltip {
			position: relative;
			display: inline-block;
		}
		.tooltip .tooltip-text {
			visibility: hidden;
			width: 120px;
			background-color: #555;
			color: #fff;
			text-align: center;
			border-radius: 6px;
			padding: 5px 0;
			position: absolute;
			z-index: 1;
			opacity: 0;
			transition: opacity 0.3s;
		}
		/* Tooltip top content */
		.top .tooltip-text{
				bottom: 100%;
				left: 50%; 
				margin-left: -60px; /* 120/2 = 60 */
		}
		/* Tooltip right content */
		.right .tooltip-text {
			top: -5px;
				left: 110%;
		}
		/* Tooltip bottom content */
		.bottom .tooltip-text {
				top: 100%;
				left: 50%; 
				margin-left: -60px; /* 120/2 = 60 */
		}
		/* Tooltip left content */
		.left .tooltip-text {
			top: -5px;
				right: 110%;
		}
		.tooltip .tooltip-text::after {
			content: "";
			position: absolute;
			border-width: 5px;
			border-style: solid;
		}
		/* Tooltip top arrow */
		.top .tooltip-text::after {
			margin-left: -5px;
			left: 50%;
			top: 100%; 
			border-color: #555 transparent transparent transparent;
		}
		/* Tooltip bottom arrow */
		.bottom .tooltip-text::after {
			margin-left: -5px;
			bottom: 100%;
			left: 50%;
			border-color: transparent transparent #555 transparent;
		}
		/* Tooltip left arrow */
		.left .tooltip-text::after {
			top: 50%;
			margin-top: -5px;
			left: 100%;
			border-color: transparent transparent transparent #555;
		}
		/* Tooltip right arrow */
		.right .tooltip-text::after {
			top: 50%;
			margin-top: -5px;
			right: 100%;
			border-color: transparent #555 transparent transparent ;
		}
		.tooltip:hover .tooltip-text {
			visibility: visible;
			opacity: 1;
		}
Copy this code


- Add your tooltips to HTML file:

<div class="tooltip top">Top
  <span class="tooltip-text">Tooltip content</span>
</div>

<div class="tooltip left">Left
  <span class="tooltip-text">Tooltip content</span>
</div>

<div class="tooltip right">Right
  <span class="tooltip-text">Tooltip content</span>
</div>

<div class="tooltip bottom">Bottom
  <span class="tooltip-text">Tooltip content</span>
</div>
Copy this code


Move the mouse over the text in all of the positions below to see the result: