jQuery如何使用jTippy工具提示插件?

2021年3月19日18:39:36 发表评论 815 次浏览

本文概述

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

注意:请下载jQueryjTippy插件在工作文件夹中, 并在HTML代码的开头部分包含必需的文件。

<link href =" https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel =" stylesheet" type =" text / css" /> <link href =" https: //stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel =" stylesheet" type ="" text / css" /> <link href =" https:// cdnjs .cloudflare.com / ajax / libs / highlight.js / 9.12.0 / styles / darcula.min.css" rel =" stylesheet" type =" text / css" /> <link href =" jTippy.css" rel = "样式表" type =" text / css" /> <script src =" https://code.jquery.com/jquery-3.5.1.min.js"> </ script> <script src =" jTippy.min .js"> </ script>

范例1:以下示例演示了jTippy工具提示插入。

的HTML

<!DOCTYPE html>
< html >
     < head >
         < meta http-equiv = "Content-Type"
               content = "text/html; charset=UTF-8" />
  
         < title >jQuery jTippy Tooltip Plugin</ title >
  
         < meta name = "description"
               content = "jQuery tooltip plugin" />
         < meta content = "width=800, initial-scale=1" 
               name = "viewport" />
  
         < link
             rel = "stylesheet"
             href =
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
             integrity =
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
             crossorigin = "anonymous" />
         < link
             rel = "stylesheet"
             href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/
         css/font-awesome.min.css"/>
         < link
             rel = "stylesheet"
             href =
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css" />
         < link rel = "stylesheet" href = "jTippy.css" />
         < script src =
"https://code.jquery.com/jquery-3.5.1.min.js" >
         </ script >
         < script src = "jTippy.min.js" ></ script >
         < style >
             body, html {
                 height: 60%;
                 width: 60%;
                 margin: 0px;
                 font-family: Arial;
             }
         </ style >
     </ head >
     < body class = "body text-center" >
         < h2 style = "color: green;" >lsbin</ h2 >
         < b >jQuery jTippy tooltip plugin </ b >
          
< p ></ p >
  
  
         < a href = "#" data-toggle = "tooltip" title = "This is tooltip" >
             This is a dummy link to show tooltip.
         </ a >
  
         < script >
             $(function () {
                 $('[data-toggle="tooltip"]').jTippy();
             });
         </ script >
     </ body >
</ html >

输出如下: 

jQuery jTippy工具提示插件1

范例2:以下示例演示了各种选项设置和事件触发功能的用法。下面只使用了少数几个, 开发人员可以根据应用程序的需要对其进行探索和使用。当工具提示显示给用户时, 开启(" jt-show")触发事件, 以HTML形式显示消息div与id " showDivID"。讯息div隐藏一次上(" jt-hide")事件被触发。

html

<!DOCTYPE html>
< html >
     < head >
         < meta http-equiv = "Content-Type" 
               content = "text/html; charset=UTF-8" />
  
         < title >jQuery jTippy Tooltip Plugin</ title >
  
         < meta name = "description" 
               content = "jQuery tooltip plugin" />
         < meta content = "width=800, initial-scale=1" 
               name = "viewport" />
  
         < link
             rel = "stylesheet"
             href =
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
             integrity =
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
             crossorigin = "anonymous" />
         < link
             rel = "stylesheet"
             href =
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
         < link
             rel = "stylesheet"
             href =
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css" />
         < link rel = "stylesheet" href = "jTippy.css" />
         < script src =
"https://code.jquery.com/jquery-3.5.1.min.js" >
         </ script >
         < script src = "jTippy.min.js" ></ script >
         < style >
             body, html {
                 height: 100%;
                 margin: 0px;
                 font-family: Arial;
             }
         </ style >
     </ head >
     < body class = "body text-center" >
         < h2 style = "color: green;" >lsbin</ h2 >
         < b >jQuery jTippy tooltip plugin </ b >
          
< p ></ p >
  
         < a
             href = "#"
             data-toggle = "tooltip"
             title="A Tooltip is used to provide interactive
                    textual hints to the user about the element
                    when the mouse pointer moves over. Tooltip is 
                    quite useful for displaying the description of
                    different elements in the webpage.">
             Hover or Focus to see tooltip
         </ a >
  
         < div id = "showDivID" ></ div >
  
         <!-- Option settings and  events trigger-->
         < script >
             $(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();
                     });
             });
         </ script >
     </ body >
</ html >

输出如下:

jQuery jTippy工具提示插件2

输出显示事件触发器:

jQuery jTippy工具提示插件3

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: