如何使用 CSS3 和 jQuery 创建链接工具提示？

链接工具提示是在元素或链接悬停时显示额外信息的好方法。有几种方法可以做到这一点。

使用 CSS 和 jQuery：在 jQuery 中使用 mouseenter 和 mouseleave 事件来执行此操作。

  

    
        .tooltip {
            display: none;
            position: absolute !important;
            width: 200px;
            padding: 10px;
            margin: 0 0 3px 0;
            color: #fff;
            z-index: 1;
            font-size: 50px;
            text-decoration: none;
            text-align: center;
        }
  
        .tooltip:after {
            position: absolute !important;
            bottom: -14px;
            z-index: 1;
        }
  
        .tooltip:before {
            content: "";
            position: absolute !important;
            bottom: -14px;
            z-index: 100;
        }
    
  

  

    
        Hover over me!
    
  
    
        $("a").mouseenter(function (e) {
            var $x = e.pageX - this.offsetLeft;
            var $tooltip_text = $(this).attr("title");
  
            $(this).append('<div class="tooltip">' 
                    + $tooltip_text + '</div>');
            $("a > div.tooltip.").fadeIn(300);
  
        });
  
        $("a").mouseleave(function () {
            $("a > div.tooltip.").fadeOut(300)
                    .delay(300)(function () {
                $(this).remove();
            });
        });
    

  

输出：

将鼠标悬停在“悬停在我身上！” ，输出是

Hello world!

使用 jQuery UI：jQuery UI的工具提示小部件有助于自定义工具提示。 tooltip() 方法用于向任何元素添加工具提示。

  

  
    
    
  
    
    
  
    
    
  
    
        .example {
            padding-left: 2rem !important;
            margin-top: 3rem;
            text-decoration: none;
            color: green;
  
        }
    

  

    
        Hover Over me!
    
  
    
        $(function () {
            $("#myTooltip").tooltip();
        });
    

  

输出：

仅使用 CSS：工具提示可以使用 CSS 创建，并且可以像任何其他元素一样进行自定义。

  

    

  

    
Hover over me!
        
            Hello world!
        
    

  

输出：