jQuery jTippy Tooltip Plugin Last Updated : 13 Jul, 2023 Comments Improve Suggest changes Like Article Like Report In this article, we will learn how to implement the tooltip feature using the jQuery jTippy Tooltip plugin. Note: Please download the jQuery jTippy plugin in the working folder and include the required files in the head section of your HTML code. <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=”stylesheet” type=”text/css”/><script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script> <script src=”jTippy.min.js”></script> Example 1: The following example demonstrates the basic functionality of jTippy Tooltip Plugin. 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;"> GeeksForGeeks </h2> <b>jQuery jTippy tooltip plugin </b> <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> Output: Example 2: The following example demonstrates the use of various option settings and event triggering functions. Only a few are used below, the developer can explore and use them based on the application's need. When the tooltip is shown to the users, on('jt-show') event is triggered which displays the message in the HTML div with id "showDivID". The message div is hidden once on('jt-hide') event is triggered. 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;"> GeeksForGeeks </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> Output: Comment More infoAdvertise with us Next Article jQuery jTippy Tooltip Plugin G geetanjali16 Follow Improve Article Tags : Web Technologies JQuery jQuery-Plugin Similar Reads jQuery Page Piling Plugin jQuery pagePiling.js plug-in is a rich feature available for programmers for piling more than one layout section, one over the other, and accessing each page by URL or mouse scrolling or side bullets navigation. This feature provides all type of smooth vertical, horizontal, and side navigations to t 5 min read jQuery | Flickerplate Plugin jQuery provides Flickerplate plugin that helps our programmers to create sliders for websites that can cycle through a list of background images along with dot navigation feature and animated arrows. The plugin consists of many more libraries that are responsible for touch detections and events such 5 min read jQuery Multiscroll Plugin jQuery provides multiscroll.js plugin which helps programmers to create split web pages along with divided multiple vertical scrolling panels.Note: Please download the jQuery multiscroll plugin to your working folder and include the required files in the head section of your code as shown below. Dow 3 min read jQuery RowGrid Plugin jQuery provides a very simple, user-friendly and responsive rowGrid plugin that helps programmers to display images in a straight row. It is very lightweighted and supports infinite scrolling feature. Real examples of rowGrid are Google+ images or Google image search that appears in a straight row g 4 min read jQuery Alertify Plugin jQuery framework provides alertify.js plugin that provides pre-designed customizable notification system along with interactive browser dialogs. This extensible and themeable plugin is very useful for developers providing an optimized version of alert messages with stacking up to feature. This small 5 min read jQuery Image ProgressBars Plugin In this article, we will learn how to implement image ProgressBar feature using the jQuery Image ProgressBar plugin. Note: Please download the jQuery Image ProgressBar plugin in the working folder and include the required files in the head section of your HTML code. <link href=â€progressbar.css†r 2 min read jQuery DrawSVG Plugin SVG or Scalar Vector Graphics is Extended Markup Language-based graphics supporting 2 dimensional animations of images enhancing interactiveness. The specifications of SVG are open standards by World Wide Web Consortium defined in XML text files. These files can be changed or created with any drawin 4 min read jQuery Tagsort Plugin jQuery provides Tagsort plugin that is used for displaying tags or filter elements based on different tags in a DOM. The plugin takes data-attributes of HTML page structure and dynamically creates user-friendly tags used for filtering elements. The filtration of elements are done in many ways that a 9 min read jQuery Logos Distort Plugin The jQuery provides LogosDistort plugin which helps in creating or animating a parallax environment for 3D scenes in the user browser. It uses full-page matrix3D perspective logos distortions for transforming base on mouse movement. You have to download the required files in the working folder so th 4 min read jQuery Filer Plugin jQuery provides a quick jQuery Filer uploader plugin for easy implementation of uploading the files. It provides features like instant uploading of files, file append, file removal, multiple selections, drag and drop support along with other file validations.Download the required files to include it 2 min read Like