The method to implement tooltip with pure CSS is: 1. Use nested HTML structures to wrap the trigger area and prompt content; 2. Use:hover to control the display and hide of child elements; 3. Use absolute positioning to set the prompt box position; 4. Add animation to improve the experience; 5. Pay attention to z-index and multi-directional adaptation. The specific implementation includes setting .tooltip as relative positioning, .tooltiptext is hidden by default, becomes visible when hover, and can be added to achieve fading and delay effects. At the same time, positioning in different directions is controlled through class names, but it should be noted that the effect of the mobile hover may be limited.

It is not difficult to implement a tooltip using pure CSS. The key is to understand several core CSS techniques. You don't need JavaScript to create a widget that displays content when you hover.

How to build tooltip with HTML and CSS structure

The basic idea is: wrap an element with an extra tag as prompt content, and then control its display and hiding through CSS. Common structures are as follows:

 <span class="tooltip">Hoom me<span class="tooltiptext">This is a reminder</span>
</span>

where .tooltip is the trigger area and .tooltiptext is the actual prompt text. The next step is to control when and how this child element appears.

The key to controlling display and hiding: hover positioning

The easiest way to interact in CSS is :hover , which can easily achieve pop-up effect with absolute positioning.

 .tooltip {
  position: relative;
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  width: 120px;
  background: #333;
  color: #ffff;
  text-align: center;
  border-radius: 4px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Show above*/
  left: 50%;
  margin-left: -60px; /* horizontal center*/
}

Then make it visible when hover:

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

This implements the basic version of tooltip. You can adjust the position as needed, such as lower, left or right.

Improve experience: add animation and delay display

It may be a bit abrupt when directly displaying it, and adding a fade-in animation will be more natural:

 .tooltiptext {
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}

If you want the mouse to be displayed after just moving it up, you can use transition-delay :

 .tooltiptext {
  transition-delay: 0.3s;
}

But be aware that this method will affect the hiding speed, and it may be necessary to set the entry and departure delay separately to make it more reasonable.

Notes and tips

• z-index is important, make sure the tooltip appears on top of other content.
• If you want tooltip to appear in different directions, you can control the style by adding class names, for example:
  • .tooltip.top , .tooltip.right , etc., set different bottom / left values ??respectively.
• Mobile compatibility : :hover behaves differently on touch screens. If you want to consider mobile device support, additional processing may be required or JS may be used.

Basically that's all. Using pure CSS to implement tooltip is not complicated, but pay more attention to details and you can achieve both practical and beautiful effects.

The above is the detailed content of Creating tooltips with pure CSS. For more information, please follow other related articles on the PHP Chinese website!