Add hover text without javascript like we hover on a user's reputation

Adding Hover Text Without JavaScript: Pure HTML/CSS Tooltips

Discover how to implement elegant hover text and tooltips using only HTML and CSS, mimicking the native browser behavior seen on elements like user reputation scores.

Hover text, often referred to as tooltips, provides users with additional information when they interact with an element, typically by moving their mouse cursor over it. While JavaScript is commonly used for complex tooltip behaviors, many simple and effective hover effects can be achieved purely with HTML and CSS. This article will guide you through creating accessible and visually appealing hover text without relying on any JavaScript, similar to how reputation scores are displayed on platforms like Stack Overflow.

The Basic HTML Structure for a Tooltip

The foundation of our pure CSS tooltip is a simple HTML structure. We'll typically use a parent element to contain the item that triggers the hover, and a child element that holds the actual tooltip text. The key is to position the tooltip element relative to its parent and initially hide it, only revealing it on hover.

<div class="tooltip-container">
  Hover over me
  <span class="tooltip-text">This is the hover text!</span>
</div>

Basic HTML structure for a tooltip.

Styling with CSS: Hiding and Showing the Tooltip

The magic happens with CSS. We'll use position: relative on the container and position: absolute on the tooltip text to control its placement. The visibility and opacity properties, combined with the :hover pseudo-class, will manage the showing and hiding of the tooltip, often with a smooth transition for a better user experience.

.tooltip-container {
  position: relative;
  display: inline-block; /* Allows text to wrap naturally */
  border-bottom: 1px dotted black; /* Optional: for visual cue */
  cursor: help;
}

.tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Position the tooltip above the text */
  left: 50%;
  margin-left: -60px; /* Use half the width to center */
  opacity: 0;
  transition: opacity 0.3s;
}

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

CSS to hide, show, and style the tooltip.

Adding an Arrow to the Tooltip

To make the tooltip look more professional and clearly indicate its association with the hovered element, we can add a small arrow. This is typically achieved using CSS pseudo-elements (::after or ::before) and clever border styling.

.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

CSS to add a downward-pointing arrow to the tooltip.

flowchart TD
    A[HTML Structure] --> B{CSS Styling}
    B --> C{Initial State: Hidden}
    C --> D{Hover Event (:hover)}
    D --> E{Tooltip State: Visible}
    E --> F[Add Arrow (::after)]
    F --> G[Final Rendered Tooltip]

Flowchart illustrating the process of creating a pure CSS tooltip.

Positioning and Advanced Styling

The bottom, top, left, and right properties, along with margin-left or margin-right, allow for precise positioning of the tooltip relative to its parent. You can also experiment with different background-color, padding, border-radius, and box-shadow to match your site's design. Remember to adjust z-index if your tooltip is overlapping other elements unexpectedly.