CSS Tooltip

Introduction

A CSS tooltip is a small pop-up box that appears when a user hovers over an element. The tooltip typically provides additional information or context about the element the user is hovering over.

Key Points of CSS Tooltip

1. Basic Structure:
   • CSS tooltips are often created using the ::before or ::after pseudo-elements to generate the tooltip content. Typically, the tooltip hides its content by default and reveals it when the user hovers over the element.
2. Styling:
   • You use CSS to style the appearance of the tooltip, including its position, size, background color, text color, font size, and any additional decorative elements such as arrows or borders. You can customize the styling to match the overall design aesthetic of the website
3. Triggering the Tooltip:
   • Tooltips are triggered to appear when the user hovers over the element they are associated with. This is typically achieved using the :hover pseudo-class in CSS, which changes the visibility or opacity of the tooltip content when the associated element is hovered over.
4. Accessibility:
   • When implementing tooltips, it’s essential to consider accessibility requirements. This includes ensuring that tooltips are keyboard accessible, screen reader compatible, and provide alternative methods for accessing the information they contain.

Example

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

/* Tooltip Text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

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

Output

Positioning Tooltips:

The tooltip is positioned to the right of the “hoverable” text (<div>) using CSS positioning. Additionally, the top: -5px property is used to vertically center the tooltip within its container element. Here’s a breakdown of how it works:

• The tooltip is placed to the right of the “hoverable” text by setting left: 105%.
• To ensure the tooltip is vertically centered within its container element, top: -5px is used. The value of 5px corresponds to half of the total vertical padding applied to the tooltip text (5px top padding + 5px bottom padding), ensuring it remains in the middle.

Left Tooltip:

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    top: -5px; /* Vertically center the tooltip within its container */
    right: 105%; /* Position the tooltip to the left of the "hoverable" text */
    opacity: 0;
    transition: opacity 0.3s;
}

output

Tooltip Arrows

To create an arrow that should appear from a specific side of the tooltip, add “empty” content after tooltip, with the pseudo-element class ::after together with the content property. The arrow itself is created using borders.

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 4px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

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

.tooltip:hover .tooltiptext {
  visibility: visible;
}

Output

Conclusion of CSS Tooltip

CSS tooltips provide a convenient and user-friendly way to display additional information or context when users interact with elements on a web page. By leveraging CSS styling and positioning techniques, developers can create visually appealing tooltips that enhance user experience and usability. It’s crucial to consider accessibility requirements and browser compatibility when implementing tooltips to ensure that all users can access and interact with tooltip content effectively. With careful design and implementation, CSS tooltips can significantly improve the usability and accessibility of web interfaces, making them more informative and engaging for users.

Frequently Asked Questions of CSS Tooltip