HTML 提示

参考资料

1. HTML 引文、引用和定义元素
2. HTML 文本对齐方式
3. HTML 区块元素
4. HTML 表格和边框属性
5. HTML 文本格式化
6. html排版标签详细说明以及案例
7. Html转PHP代码有哪些
8. 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 秒显示
  });