Posted inFront-End Web Design

🛈 CSS Tooltip: A Simple & Complete Guide with Examples

December 2, 2025Posted inFront-End, Web Design
🛈 CSS Tooltip: A Simple & Complete Guide with Examples

Tooltips are small hover boxes that appear when users place their mouse over an element. They help provide extra information without cluttering your UI.

In this article, you’ll learn how tooltips work, how to style them, and how to create your own custom tooltip using HTML and CSS.

🔍 What Is a Tooltip?

A tooltip is a small popup text that appears when a user hovers or focuses on an element, like a button or icon.Example:Hover on a button → a small box appears with helpful text.

A tooltip is a small popup text that appears when a user hovers or focuses on an element, like a button or icon.

Example:

Hover on a button → a small box appears with helpful text.

🧩 Basic HTML Tooltip (Using title Attribute)

The easiest tooltip is the built-in browser tooltip:

<button title="Click to submit">Submit</button>

✔ Very easy
✔ No CSS needed
✘ Styling is limited
✘ Not customizable

🎨 Custom Tooltip Using HTML & CSS

Let’s create a modern tooltip that you can fully customize.

HTML:

<div class="tooltip">
  Hover me
  <span class="tooltip-text">This is a tooltip</span>
</div>

CSS:

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltip-text {
  visibility: hidden;
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

📌 Tooltip Position Variations

🔽 Tooltip Bottom

.tooltip .tooltip-text {
  top: 125%;
  bottom: auto;
}

▶ Left Tooltip

.tooltip .tooltip-text {
  top: 50%;
  left: -120%;
  transform: translateY(-50%);
}

◀ Right Tooltip

.tooltip .tooltip-text {
  top: 50%;
  left: 120%;
  transform: translateY(-50%);
}

💬 Tooltip with Arrow

Add this CSS to create an arrow:

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

🖱 Tooltip on Click (JavaScript)

<div class="tooltip2" onclick="toggleTip()">
  Click me
  <span id="tip">Tooltip on click!</span>
</div>

<script>
function toggleTip() {
  document.getElementById("tip").classList.toggle("show");
}
</script>

<style>
#tip {
  visibility: hidden;
}
#tip.show {
  visibility: visible;
}
</style>

📱 Tooltip for Mobile Devices

Tooltips are tricky on mobile because there is no hover.
The best solutions are:

✔ On click
✔ On long-press
✔ Using icons like (i) or ?

🚫 Common Tooltip Mistakes

❌ Putting too much content
❌ Using tooltip for critical info
❌ Making tooltip slow to appear
❌ Poor contrast that affects accessibility

Keep them short & useful.

🔗 External Helpful Resources

🚀 Final Thoughts

Tooltips help you show additional context without cluttering the interface. With a bit of CSS, you can create clean, modern, animated tooltips for any website.

🔍 CSS Opacity: The Complete Guide for Beginners and Front-End Developers

Container Query vs Media Query – What’s the Difference? (Simple Guide)

Simple Login Form Using HTML, CSS, and JavaScript

Last updated on December 2, 2025