教你玩转CSS 提示工具(Tooltip)

如何使用 HTML 与 CSS 来创建提示工具。

提示工具在鼠标移动到指定元素后触发

基础提示框(Tooltip)

提示框在鼠标移动到指定元素上显示：

  

   

    

     

    
    

     
 <style>
     
    
   

    

     

    
    

     
 /* Tooltip 容器 */
     
    
   

    

     

    
    

     
 .tooltip {
     
    
   

    

     

    
    

     
 position: relative;
     
    
   

    

     

    
    

     
 display: inline-block;
     
    
   

    

     

    
    

     
 border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 /* Tooltip 文本 */
     
    
   

    

     

    
    

     
 .tooltip .tooltiptext {
     
    
   

    

     

    
    

     
 visibility: hidden;
     
    
   

    

     

    
    

     
 width: 120px;
     
    
   

    

     

    
    

     
 background-color: black;
     
    
   

    

     

    
    

     
 color: #fff;
     
    
   

    

     

    
    

     
 text-align: center;
     
    
   

    

     

    
    

     
 padding: 5px 0;
     
    
   

    

     

    
    

     
 border-radius: 6px;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 /* 定位 */
     
    
   

    

     

    
    

     
 position: absolute;
     
    
   

    

     

    
    

     
 z-index: 1;
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 /* 鼠标移动上去后显示提示框 */
     
    
   

    

     

    
    

     
 .tooltip:hover .tooltiptext {
     
    
   

    

     

    
    

     
 visibility: visible;
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     
 </style>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 <div class="tooltip">鼠标移动到这
     
    
   

    

     

    
    

     
 <span class="tooltiptext">提示文本</span>
     
    
   

    

     

    
    

     
 </div>
     
    
  
 

实例解析

HTML) 使用容器元素 (like <div>) 并添加 “to

文章来源: sunmenglei.blog.csdn.net，作者：孙叫兽，版权归原作者所有，如需转载，请联系作者。

原文链接：sunmenglei.blog.csdn.net/article/details/107525843