HTML 提示

HTML 提示（Tooltips）

简介
HTML 提示（Tooltips）是当用户悬停在元素上时显示的小型弹出框，用于提供额外信息或说明。

标签与属性  

1. title 属性

• 用法：<element title="提示文本">

• 功能：鼠标悬停时显示简单文本提示。

• 示例：  

  <a href="#" title="点击访问示例链接">示例</a>

2. 自定义 Tooltip（结合 CSS 和 JavaScript）

• 通过 HTML 结构 + CSS 样式 + JavaScript 交互实现更复杂的提示。

• 示例结构：  

  <div class="tooltip">悬停我
    <span class="tooltiptext">自定义提示内容</span>
  </div>

CSS 扩展  

1. 基础样式

   .tooltip {
     position: relative;
     display: inline-block;
   }
   .tooltiptext {
     visibility: hidden;
     width: 120px;
     background-color: #555;
     color: #fff;
     text-align: center;
     padding: 5px;
     border-radius: 6px;
     position: absolute;
     z-index: 1;
   }
   .tooltip:hover .tooltiptext {
     visibility: visible;
   }

2. 位置调整

• 通过 top, left, right, bottom 控制提示框位置。

• 示例（顶部提示）：  

  .tooltiptext {
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* 水平居中 */
  }

3. 动画效果

• 使用 opacity 和过渡效果：  

  .tooltiptext {
    opacity: 0;
    transition: opacity 0.3s;
  }
  .tooltip:hover .tooltiptext {
    opacity: 1;
  }

功能扩展（JavaScript）  

• 动态控制提示内容或延迟显示：  

  document.querySelector('.tooltip').addEventListener('mouseover', function() {
    setTimeout(() => { 
      this.querySelector('.tooltiptext').style.visibility = 'visible'; 
    }, 500); // 延迟 0.5 秒显示
  });