jQuery jTippy 工具提示插件

在本文中，我们将学习如何使用 jQuery jTippy Tooltip插件实现工具提示功能。

注意：请在工作文件夹中下载 jQuery jTippy插件，并在 HTML 代码的 head 部分包含所需的文件。

rel=”stylesheet” type=”text/css”/>

rel=”stylesheet” type=”text/css”/>

rel=”stylesheet” type=”text/css”/>

 

 

示例 1：以下示例演示了jTippy Tooltip Plugin 的基本功能。

HTML

    
        
  
        jQuery jTippy Tooltip Plugin
  
        
        
  
        
        
        
        
        
        
        
        
            body,
            html {
                height: 60%;
                width: 60%;
                margin: 0px;
                font-family: Arial;
            }
        
    
    
        GeeksForGeeks
        jQuery jTippy tooltip plugin 
          

  
  
        
            This is a dummy link to show tooltip.
        
  
        
            $(function () {
                $('[data-toggle="tooltip"]').jTippy();
            });
        
    

输出：

例2：下面的例子演示了各种选项设置和事件触发功能的使用。下面仅使用其中的几个，开发者可以根据应用的需要进行探索和使用。当工具提示显示给用户时，会触发 on('jt-show')事件，在 HTML div 中显示消息， id 为“showDivID” 。一旦 on('jt-hide')事件被触发，消息div就会隐藏。

html

    
        
  
        jQuery jTippy Tooltip Plugin
  
        
        
  
        
        
        
        
        
        
        
        
            body,
            html {
                height: 100%;
                margin: 0px;
                font-family: Arial;
            }
        
    
    
        GeeksForGeeks
        jQuery jTippy tooltip plugin 
          

  
        
            Hover or Focus to see tooltip
        
  
        
  
        
        
            $(function () {
                $('[data-toggle="tooltip"]')
                    .jTippy({
                        title: "Trying out jTippy tooltips",
                        // The tooltip is displayed on mouse 
                        // over and focus event
                        trigger: "hoverfocus",
                        size: "medium",
                        position: "auto",
                        backdrop: false,
                        theme: "black",
                        singleton: true,
                        close_on_outside_click: true,
                    })
                    .on("jt-show", function (e, tooltip, hide) {
                        // triggered on show tooltip ;
                        $("#showDivID").html("Show tooltip event is triggered");
                    })
                    .on("jt-hide", function (e) {
                        //triggered on tooltip hide
                        $("#showDivID").hide();
                    });
            });
        
    

输出：

显示事件触发器的输出：