本文概述
在本文中, 我们将学习如何使用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 >输出如下：
范例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 >输出如下：
输出显示事件触发器：
