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

在这篇文章中，我们将介绍使用CSS3和jQuery创建链接工具提示的方法。

当一个元素或链接悬停在上面时，链接工具提示是显示更多信息的一种很好的方法。有多种方法可以实现这一点。当链接悬停在上面时，工具提示被用来提供额外的信息。

多种方法

我们提供了不同的方法来解决这个问题。

通过使用JQuery的mouseenter和mouseleave函数。
通过使用tooltip()函数。
仅使用CSS来创建工具提示。

方法1：使用JQuery的mouseenter和mouseleave函数

jQuery使用mouseenter和mouseleave函数来执行此操作。−

当指针设备（通常是鼠标）被移动到元素内部，其热点位于事件被触发的元素内时，mouseenter事件被触发。当指针设备（通常是鼠标）移出元素时，mouseleave事件被触发。

语法

在HTML中，我们使用如下的JQuery的mouseenter和mouseleave的语法−

addEventListener('mouseleave', (event) => {});
addEventListener('mouseenter', (event) => {});

示例

在以下部分中，我们将使用jQuery的mouseenter和mouseleave函数设计代码。使用<a>标签创建了一个名为“Hover Over me!“的链接，当用户将鼠标悬停在此链接上时，会显示给用户指定的文本。

<!DOCTYPE html>
<html>
<head>
    <style>
        .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;
        }
    </style>
</head>
<body>
    <a href="#" class="link" title="Welcome to tutorials points" class="tooltip_link left">
        Hover over me!
    </a>
    <script>
         $("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();
            });
        });
    </script>
</body>
</html>

在鼠标悬停在“鼠标移到我上面！”上后，输出为

Welcome to tutorials points

方法2：使用tooltip()函数

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

工具提示可以附加到任何元素。当您将鼠标悬停在元素上时，标题属性会显示在元素旁边的小框中，就像本地工具提示一样。

jQueryUI提供tooltip()方法，用于向想要显示工具提示的任何元素添加工具提示。与仅切换可见性相比，默认情况下，这会提供淡入淡出的动画效果来显示和隐藏工具提示。

语法

$(selector, context).tooltip (options) Method
$(selector, context).tooltip ("action", [params]) Method

示例

在下面的代码中，我们使用了tooltip()楔形来自定义上面示例中创建的工具提示，这里我们使用了HTML的style标签的type属性，并在其下面添加了我们希望工具提示应该出现或用户所需的属性。

<!DOCTYPE html>
<html lang="en">
   <head>
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style type="text/css">
         .hi {
            text-decoration: none;
            color: blue;
         }
      </style>
   </head>
   <body>
      <a class="hi" id="myTooltip"href="#" title="Welcome to tutorials points">
         Hover Over me!
      </a>
      <script>
          $(function () {$ ("#myTooltip").tooltip();
         });
      </script>
   </body>
</html>

方法3：仅使用CSS创建工具提示

在这种方法中，我们只使用CSS根据要求创建工具提示。主要使用CSS的hover属性，在用户将鼠标悬停在上面时，它变成工具提示。

− hover选择器用于在鼠标悬停时选择元素。

示例

在这个程序中，我们只使用CSS属性根据要求创建工具提示。在这里，当用户将鼠标悬停在链接上时，它将变成工具提示，并显示给定的消息。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            text-align: center;
         }
         .t_t {
            position: relative;
            display: inline-block;
            margin-top: 3rem;
         }
         .t_t .tooltiptext {
            width: 8rem;
            text-align: center;
            border-radius: 4px;
            background-color: blue;
            color: #fff;
            padding-top: 9px;
            padding-bottom: 9px;
            position: absolute;
            z-index: 1;
            bottom: 165%;
            margin-left: -55px;
            left: 50%;
            transition: opacity 0.5s;
            visibility: hidden;
         }
         .t_t .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: green
               transparent transparent;
         }
         .t_t:hover .tooltiptext {
            visibility: visible;
         }
      </style>
   </head>
   <body>
      <div class="t_t">Hover over me!
         <span class="tooltiptext">
            Welcome to tutorials Point
         </span>
      </div>
   </body>
</html>

支持的浏览器 − 支持 pointer-events 属性的浏览器如下所示 −