CSS Tooltip

A tooltip is a small message that appears when a user hovers (mouse over) an element like a button, link, or image. It gives extra information without taking extra space on the page.

You often see tooltips on websites where a little box pops up saying something like “Click here” or “More info.”

Why Use Tooltip in CSS?

To give helpful hints to users
To display extra info without cluttering the page
To improve user experience with minimal design

Tooltip Without JavaScript?

Tooltips can be created with simply HTML and CSS — no JavaScript. Nice and simple and quick!

Basic HTML + CSS Tooltip Example

HTML & CSS Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Tooltip</title>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }

    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      padding: 5px;
      border-radius: 5px;

      /* Position the tooltip */
      position: absolute;
      z-index: 1;
      bottom: 125%; /* Show above the element */
      left: 50%;
      margin-left: -60px;

      /* Fade in tooltip */
      opacity: 0;
      transition: opacity 0.3s;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>

<h3>Hover over the word below 👇</h3>

<div class="tooltip">Hover me
  <span class="tooltiptext">Tooltip text here</span>
</div>

</body>
</html>

Hover over the word below 👇

Explanation (Line-by-Line):

.tooltip — The main container (like a button or text).
.tooltiptext — The text that shows when you hover.
visibility: hidden — Hides it at first.
position: absolute — Places it above or around the element.
hover effect — When you hover, it becomes visible and fades in.

Tooltip Positions

Want it above, below, left, or right? Just change the bottom, top, left, or right values in CSS.

Example for Bottom Tooltip:

top: 125%;
bottom: auto;

Example for Left Tooltip:

top: -5px;
right: 105%;

Example for Right Tooltip:

top: 50%;
left: 105%;
right: auto;
transform: translateY(-50%);

Pro Tips

Use tooltips for icons, form fields, or buttons to guide users.
Keep the text short and useful.
Use contrast colors for tooltip and background for better readability.
Add transition for smooth effect.

Make Tooltip Responsive

Media queries can also be included to specify the size of the tooltip or size of the font for smaller screen sizes.

@media (max-width: 600px) {
  .tooltip .tooltiptext {
    width: 90px;
    font-size: 12px;
  }
}

Advanced Tooltip (with Arrow)

Add a small arrow under the tooltip for design polish:

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

This arrow is already included in the basic example's CSS for you to see!

Summary for Freshers

Concept	Meaning
`.tooltip`	The item user hovers over.
`.tooltiptext`	The hidden message
`visibility`	Shows or hides tooltip
`position: absolute`	Controls where tooltip appears
`hover`	Shows tooltip on mouseover

Conclusion

Bro, this is one of the simplest and coolest tricks you can add to your website to make it look pro and helpful. No JavaScript needed, just HTML + CSS magic. Learn it well, practice it on buttons, forms, icons — and you'll impress your clients or teachers .

Try it Yourself

Previous : Css Shadows Next : Css Masking