Dynamic Tooltip Popup Plugin With jQuery And JSON - Texotip

Texotip is a lightweight jQuery plugin used to create themeable, popup-style tooltips for specific words within the document that dynamically loads tooltip content from an external JSON data file. The plugin supports any content to be embedded into the tooltip, such as text, images, links, and even HTML5/Youtube videos.

Basic usage:

1. Upload the 'texotip.js' and themes folder into your project. Themes included:

• blue
• green
• grey
• red
• white

2. Include the 'texotip.js' after jQuery JavaScript library as this:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="texotip.js"></script>

3. Define the words and their corresponding tooltip content in the 'en_GB.texotip.json' just like these:

// en_GB.texotip.json
[
  {
    "text": "jQuery",
    "content": "A simple image defined in the JSON data file<br><br><img src=\"image.jpg\">",
    "url": "http://www.google.co.uk"
  },
  {
    "text": "JavaScript library",
    "content": "A Youtube video about jQuery. Clicking on the link redirects to the Youtube page.<br><br><iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/BWXggB-T1jQ\" frameborder=\"0\" allowfullscreen><\/iframe>",
    "url": "https://www.youtube.com/watch?v=BWXggB-T1jQ"
  },
  {
    "text": "DOM",
    "content": "<strong>What is the DOM?<\/strong><br>The Document Object Model (DOM) is a cross-platform and language-independent<br>application programming interface that treats an HTML, XHTML, or XML document<br>as a free structure wherein each node is an object representing a part of the document.",
    "url": "https://en.wikipedia.org/wiki/Document_Object_Model"
  },
  {
    "text": "widgets",
    "content": "This is an example of HTML audio widget display<br><br><audio controls><source src=\"horse.ogg\" type=\"audio/ogg\"></audio>",
    "url": "http://www.google.com"
  }
]

4. Initialize the tooltip plugin with default options. That's it.

$('#myContainer').texotip(); 

5. Customize the tooltip plugin by overriding the default options as displayed below:

$('#myContainer').texotip({
  language: "en_GB",
  jsonData: "data",
  caseSensitive: true,
  defaultRenderPattern: '<a href="#" class="tooltip">@text</a>',
  topSpacing: 2,
  boxOffsetH: 0,
  boxOffsetV: 25,
  boxMinWidth: 250,
  boxPadding: 20,
  boxClass: 'texotip-box',
  boxzIndex: 9999,
  textRenderPattern: null,
  boxWillShow: function (arrow, close) {
    $(this).show();
    arrow.show();
    close.show();
  },
  boxWillHide: function (arrow, close) {
    arrow.hide().remove();
    close.hide().remove();
    $(this).hide().remove();
  },
  theme: 'red',
  linkActive: false,
  linkTarget: '_blank',
  closeButton: true 
}); 

---

This awesome jQuery plugin is developed by david-fiaty. For more Advanced Usages, please check the demo page or visit the official website.