jQuery如何使用jTippy工具提示插件（） _jTippy

本文概述

的HTML
html

【jQuery如何使用jTippy工具提示插件（）】在本文中, 我们将学习如何使用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://www.lsbin.com/https： //stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel =" stylesheet" type ="" text / css" /> < link href ="https://www.lsbin.com/https：// cdnjs .cloudflare.com / ajax / libs / highlight.js / 9.12.0 / styles / darcula.min.css" rel =" stylesheet" type =" text / css" /> < link href ="https://www.lsbin.com/jTippy.css" rel = "样式表" type =" text / css" /> < script src =" https://code.jquery.com/jquery-3.5.1.min.js"> < / script> < script src ="https://www.lsbin.com/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 = "https://www.lsbin.com/jTippy.css" /> < script src = "https://code.jquery.com/jquery-3.5.1.min.js" > < / script > < script src = "https://www.lsbin.com/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 = "https://www.lsbin.com/#" 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 = "https://www.lsbin.com/jTippy.css" /> < script src = "https://code.jquery.com/jquery-3.5.1.min.js" > < / script > < script src = "https://www.lsbin.com/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 = "https://www.lsbin.com/#" 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 andevents 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 >

输出如下：