Creating a Simple HTML and CSS Tooltip Without JavaScript

Here is how to create a Simple HTML and CSS Tooltip Without JavaScript

Step 1: HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple CSS Tooltip Without JavaScript</title>
    <meta name="description" content="Learn how to create a simple tooltip using only HTML and CSS without JavaScript. Includes example code and step-by-step guide.">
    <meta name="keywords" content="HTML CSS tooltip, simple tooltip, tooltip without JavaScript, hover tooltip, CSS tooltip example">
    
</head>
<body>

<h2>Simple Tooltip Example</h2>
<p>Hover over the text below to see the tooltip:</p>

<!-- Tooltip Element -->
<span class="tooltip">Hover over me
    <span class="tooltip-text">This is a tooltip message!</span>
</span>

</body>
</html>

Step 2: CSS Code

body {
          font-family: Arial, sans-serif;
          text-align: center;
          margin: 50px;
      }

      /* Tooltip Container */
      .tooltip {
          position: relative;
          display: inline-block;
          cursor: pointer;
          font-size: 18px;
          color: #007bff;
          font-weight: bold;
          border-bottom: 1px dashed #007bff;
      }

      /* Tooltip Text */
      .tooltip .tooltip-text {
          visibility: hidden;
          width: 150px;
          background-color: black;
          color: #fff;
          text-align: center;
          padding: 5px;
          border-radius: 5px;
          position: absolute;
          bottom: 125%; /* Position above the element */
          left: 50%;
          transform: translateX(-50%);
          opacity: 0;
          transition: opacity 0.3s ease-in-out;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
          white-space: nowrap;
      }

      /* Tooltip Arrow */
      .tooltip .tooltip-text::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border-width: 5px;
          border-style: solid;
          border-color: black transparent transparent transparent;
      }

      /* Show Tooltip on Hover */
      .tooltip:hover .tooltip-text {
          visibility: visible;
          opacity: 1;
      }

Explanation

Tooltip Structure
- The .tooltip class creates a wrapper around the text.
- The .tooltip-text is hidden by default and appears on hover.
CSS Styling
- position: relative; ensures the tooltip appears relative to the text.
- visibility: hidden; and opacity: 0; keep the tooltip hidden until hover.
- The tooltip appears above the text using bottom: 125%;.
Hover Effect
- When the user hovers over .tooltip, .tooltip-text becomes visible.
- transition: opacity 0.3s ease-in-out; ensures a smooth fade-in effect.

Here is how to create a Simple HTML and CSS Tooltip Without JavaScript

Step 1: HTML Code

Step 2: CSS Code

Explanation

Leave a Reply Cancel reply