創(chuàng)建純CSS提示框需用HTML定義結(jié)構(gòu)，如包含觸發(fā)元素和提示文本的div；2. 使用CSS設(shè)置.tooltip-text默認(rèn)隱藏，通過:hover觸發(fā)顯示，並用position、visibility和opacity控制外觀與過渡；3. 可通過::after偽元素添加指向箭頭，調(diào)整border-color實(shí)現(xiàn)三角形；4. 通過修改top、bottom、left、right等屬性實(shí)現(xiàn)上下左右不同位置的提示框；5. 為提升可訪問性，應(yīng)添加aria-label或role="tooltip"屬性；最終得到一個(gè)輕量、響應(yīng)式且無需JavaScript的提示框，適用於現(xiàn)代瀏覽器並可自定義樣式。

Creating a tooltip with CSS is simple and doesn't require JavaScript for basic functionality. You can build a clean, responsive tooltip that appears on hover using just HTML and CSS. Here's how:

1. Basic HTML Structure

Use a container element with a tooltip text inside. A common pattern is to use a span or div as the trigger and another element (like ::after or a nested span ) for the tooltip content.

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

2. Core CSS for Tooltip Appearance and Behavior

Style the tooltip so it's hidden by default and appears when the parent is hovered.

 .tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-bottom: 1px dotted black; /* Optional: adds underline to indicate interactivity */
}

.tooltip .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 (half of width) */
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 14px;
}

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

3. Optional: Add an Arrow (Triangle)

You can use a pseudo-element to create a small arrow pointing to the trigger.

 .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;
}

4. Positioning Variations

You can position the tooltip in different places by adjusting the position and arrow:

• Below : Change bottom: 125% to top: 125% , and flip the arrow with border-color: transparent transparent #333 transparent .
• Left/Right : Use right: 125% or left: 125% , and adjust arrow accordingly.

Example for right-side tooltip:

 .tooltip-right .tooltip-text {
  top: -5px;
  left: 105%;
  margin-left: 0;
}

.tooltip-right .tooltip-text::after {
  left: -5px;
  top: 50%;
  margin-top: -5px;
  border-color: transparent #333 transparent transparent;
}

5. Accessibility Tip

For better accessibility, consider adding aria-label or role="tooltip" :

 <div class="tooltip" aria-label="Tooltip content">
  Hover over me
  <span class="tooltip-text">This is a tooltip!</span>
</div>

That's it! You now have a fully functional, pure-CSS tooltip. It's lightweight, fast, and works across all modern browsers. Just tweak colors, positioning, and transitions to match your design.

以上是如何使用CSS創(chuàng)建工具提示？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！