How to Create a Tooltip using Pure CSS

Hello dev's, today I'll show you how to create a tooltip using raw CSS, without using of framework like bootstrap or tailwind CSS which allows you to add additional information to an element when the user hovers over it. So, let's see how we can easily add a tooltip in our project.

Table of Contents

  1. Setup index.html
  2. Output

Setup index.html

Here we we'll write some CSS code manipulate and beautify our html content. So, look at the below source code

<!DOCTYPE html>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Implementing a search bar with JavaScript and AJAX -</title>
.tooltip-container {
  margin-top : 50px;
  margin-left : 50px;
  position: relative;
  display: inline-block;

.tooltip-target {
  border-bottom: 1px dotted #ccc;
  cursor: help;

.tooltip {
  visibility: hidden;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;

.tooltip-container:hover .tooltip {
  visibility: visible;
<div class="tooltip-container">
  <div class="tooltip-target">Hover me</div>
  <div class="tooltip">This is a tooltip</div>

Here, we're creating a tooltip container that contains a tooltip target and a tooltip. We're using CSS to position the tooltip below the tooltip target and hide it by default using the visibility: hidden property. When the user hovers over the tooltip container, we're using the CSS :hover selector to make the tooltip visible using the visibility: visible property.

You can customize the tooltip styling and position to fit your specific needs. You can also use JavaScript to add dynamic content to the tooltip or to create more complex interactions with the tooltip.


So if we open our html file in our browser then we can find the below output.

In initial condition

After Hover


That's it for today. I hope you've enjoyed this tutorial. Thanks for reading. ๐Ÿ™‚