KOglossaryLinks jQuery plugin shows glossary-style tooltips when hovering (or clicking on touch devices). You provide a JSON feed and add data attributes to any HTML element.

The plugin handles various screen dimensions with ease; Repositions the tooltip horizontally so that it can be displayed. The position of the tooltip is not vertically repositioned if there is not enough vertical height.

custom tooltip in jquery, how to add tooltip dynamically in jquery, jquery tooltip examples, simple jquery tooltip codepen, tooltip using jquery, best tooltip library

Highly Configurable Floating Panels, Modals, Tooltips | jsPanel

How to make use of it:

1. Load the required KOglossaryLinks.css for basic tooltip styles.

<link rel="stylesheet" href="dist/KOglossaryLinks.css">

2. Add the data-koglossarylink attribute to the glossary terms as follows.

<a href="" data-koglossarylink="Glossary term">Glossary term</a>

3. Create a definition for the glossary term in the JSON file.

[
  {
    "term": "Glossary Term 1",
    "description": "Description 1."
  },
  {
    "term": "Glossary Term 2",
    "description": "Description 2."
  },
  {
    "term": "Glossary Term 3",
    "description": "Description 3."
  }
]

4. Load the jQuery library and jQuery KOglossaryLinks plug-in.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="dist/jquery-KOglossaryLinks.js"></script>

5. Calling the function in the document is ready and specifying the source URL of the JSON file.

$(document.body).KOglossaryLinks({
  sourceURL    : 'glossaryTerms.json',
  tooltipwidth : 260
});

Display Glossary-style Tooltips On Hover, KOglossaryLinks jQuery Plugin/Github

See Demo And Download

Official Website(mrmartineau): Click Here

This superior jQuery/javascript plugin is developed by mrmartineau. For extra advanced usage, please go to the official website.