Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

jQuery Tooltip


May 07, 2021 jQuery


Table of contents


jQuery Tooltip

The jQuery Tooltip plug-in replaces native tooltip boxes so that they can be customized, and you only need to adjust their content, location, and appearance.

The plug-in, currently version 1.3, has not been updated for a long time and is recommended using the jQuery UI tooltip box.

To learn more about the jQuery UI tooltip box, check out the API document jQuery UI tooltip box widget.

Example demonstration

jQuery Tooltip plug-in demo.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" >
  <script src="//code.jquery.com/jquery-1.10.2.js" rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js" rel="external nofollow" ></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function({
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width5em;
  }
  </style>
</head>
<body>
 <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p><p>But as it's not a native tooltip, it can be styled. Any themes built with<a href="http://jqueryui.com/themeroller/" rel="external nofollow" target="_blank"  title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>will also style tooltips accordingly.</p><p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p><p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes.">
</p><p>Hover the field to see the tooltip.</p>
 
 </body>
</html>

Read about it

jQuery EasyUI Tutorial: jQuery EasyUI Basic Plug-in - Tooltip Prompt Box