Implement a tooltip system using only CSS for displayinginformation on hover.

Hey, I am Ajink, and today in this blog, we’re going to implement a tooltip system using only CSS. Tooltips are a handy way to provide additional information when users hover over specific elements on a webpage.

HTML Code: create index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Tooltip System</title>
</head>
<body>
  <div class="tooltip-container">
    <div class="tooltip-trigger" data-tooltip="Hello! This is a tooltip.">Hover me</div>
    <div class="tooltip-text">Hello! This is a tooltip.</div>
  </div>
</body>
</html>

HTML Code Explanation:

  • We have a basic HTML structure with a container div and a trigger element (tooltip-trigger) that will display the tooltip on hover.

CSS Code: style.css

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.tooltip-container {
  position: relative;
}

.tooltip-trigger {
  cursor: pointer;
  position: relative;
  border: 1px solid #3498db;
  padding: 10px;
  background-color: #3498db;
  color: #fff;
  border-radius: 4px;
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 4px;
  width: 150px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.tooltip-trigger:hover + .tooltip-text {
  visibility: visible;
  opacity: 1;
}

CSS Code Explanation:

  • The CSS provides styling for the tooltip system.
  • The .tooltip-container class is set as relative, and the .tooltip-trigger class represents the element that triggers the tooltip on hover.
  • The .tooltip-text class represents the actual tooltip and is initially hidden (visibility: hidden;).
  • On hover, the tooltip becomes visible and fades in with a smooth transition.

Conclusion:

In this blog, we successfully implemented a tooltip system using only CSS. You can use this technique to enhance user experience by providing additional information on hover. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.

Thanks for reading, and if you have any doubts, feel free to comment!

Ajink Gupta
Ajink Gupta

Ajink Gupta is a software developer from Dombivli, Maharashtra, India. He has expertise in a variety of technologies including web development, mobile app development, and blockchain. He works with languages and frameworks like JavaScript, Python, Flutter, React, and Django.

Ajink Gupta is also active on several platforms where he shares his work and engages with the community. You can find his projects and contributions on GitHub and follow his tutorials and updates on his YouTube channel​ . He also has a personal website where he showcases his portfolio and ongoing projects at ajinkgupta.vercel.app

Articles: 59