如何創建僅CSS的工具提示？

創建純CSS提示框需先設置HTML結構，使用包含觸發元素和提示文本的容器；2. 通過CSS將提示文本默認隱藏，利用:hover偽類實現懸停顯示；3. 添加position、visibility、opacity和transition屬性實現平滑顯示效果；4. 可選添加偽元素::after製作指向箭頭並調整位置以實現上下左右不同方向提示；5. 關鍵要點包括使用visibility而非display以支持過渡動畫，確保父容器為relative子元素為absolute定位，並用z-index保證層級顯示完整。

Creating a tooltip with just CSS is simple and effective—no JavaScript needed. You can build a clean, hover-activated tooltip using HTML and pure CSS. Here's how to do it step by step.

✅ Basic Structure: HTML Setup

Use a container element (like a span or div ) with a tooltip text inside. The tooltip will appear when the user hovers over the trigger element.

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

? Styling the Tooltip with CSS

The key idea is to hide the tooltip by default and show it on hover using the :hover pseudo-class.

 /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip text - hidden by default */
.tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Position above the trigger */
  left: 50%;
  margin-left: -60px; /* Center horizontally */
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  font-size: 14px;
}

/* Show tooltip on hover */
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

? Optional Enhancements

You can improve the appearance and positioning with a small arrow (triangle) using a pseudo-element:

 /* Add an arrow pointing down */
.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;
}

You can adjust bottom , top , or left values to position the tooltip above , below , left , or right of the trigger.

For example, to show the tooltip below :

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

.tooltip-text::after {
  top: -10px;
  border-color: transparent transparent #333 transparent;
}

✅ Key Points to Remember

• Use visibility: hidden/visible instead of display: none/block to allow smooth transitions.
• opacity transition gives a nice fade effect.
• position: absolute on the tooltip and relative on the container ensure correct positioning.
• z-index keeps the tooltip above other elements.

Basically, that's it. With just a few lines of CSS, you get a fully functional, styled tooltip—no JavaScript required. Just tweak colors, positioning, and size to match your design.

以上是如何創建僅CSS的工具提示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！