Shows Glossary Definitions For Terms On Mouse Hover - Instant Definitions

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:

• Getting Wikipedia Description In Tooltips - wikiUp

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.