Shows Glossary Definitions For Terms On Mouse Hover - Instant Definitions
File Size: | 14.6 KB |
---|---|
Views Total: | 1900 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The Instant Definitions jQuery plugin automatically fetches glossary definitions from a JSON file and display them in a tooltip when hovering over the corresponding terms within the document.
More features:
- Auto highlights terms within the document.
- Custom underline & background of the highlighted terms.
- Shows an error tooltip when there is no matched definition.
- Auto hides on mobile devices or not.
See also:
How to use it:
1. To get started, include jQuery JavaScript library and the jQuery Instant Definitions plugins' files on the html page.
<link rel="stylesheet" href="css/instant-definitions.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="js/instant-definitions.js"></script>
2. Set terms and definitions in a JSON file as follows:
// terms.json var glossary = { "items": [{ "term": "jQuery", "title": "jQueryScript.Net", "definition": "A JavaScript library designed to simplify HTML DOM tree traversal and manipulation." }, { "term": "JSON", "title": "What Is JSON", "definition": "An open-standard file format that uses human-readable text to transmit data objects consisting of attribute–value pairs and array data types" }] }
3. Import the JSON file into the page.
<script src="terms.json"></script>
4. Add the CSS class idef
to the terms and specify the definitions using the data-idef
attribute as follows:
<p>The Instant Definitions <span class="idef" data-idef="jQuery">jQuery</span> plugin automatically fetches glossary definitions from a <span class="idef" data-idef="JSON">JSON</span> file and display them in a tooltip when hovering over the corresponding terms within the document.</p>
5. Initailize the jQuery Instant Definitions plugin and done.
$("body").instantDefinitions();
6. Customize the styles of the highlighted terms.
$("body").instantDefinitions({ underlineText: false, underlineColor: "#00c7c7", underlineWeight: 2, backgroundColor: "#abfcab", backgroundOpacity: 0.4, highlightText: true, boldText: false, noStyle: false });
7. Set the max width of the tooltip popup.
$("body").instantDefinitions({ maxSize: 350 });
8. Determine whether to show an error message when there is no matched definition.
$("body").instantDefinitions({ showErrors: true });
9. Determine whether to display titles.
$("body").instantDefinitions({ showTitles: true });
10. Enable/disable the plugin on mobile devices.
$("body").instantDefinitions({ hideMobile: true });
This awesome jQuery plugin is developed by tawong. For more Advanced Usages, please check the demo page or visit the official website.