How to Create a Tooltip using Pure CSS

Jul 06, 2023
Article · 2 min
451 words

Like (0)
Favorite (0)

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.

Setup index.html
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

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Implementing a search bar with JavaScript and AJAX - shouts.dev</title>
  <style>
.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;
}
  </style>
</head>
<body>
<div class="tooltip-container">
  <div class="tooltip-target">Hover me</div>
  <div class="tooltip">This is a tooltip</div>
</div>
</body>
</html>

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.