Keywordize by zackperdue

Keywordize jQuery Plugin.

Add Keywords dynamically to your web pages.

Using Keywordize

Include jQuery and keywordize.js into your project.

  
    <head>
      <meta charset="UTF-8">
      <title>jQuery Keywords Replace Tooltip</title>
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

      <link rel="stylesheet" href="transition.css">
      <script src="transition.js"></script>

      <script src="popup.js"></script>
      <link rel="stylesheet" href="popup.css">
      <script type="text/javascript" src="keywordize.js"></script>
    </head>

You'll need to supply an array of objects that define a keyword and a definition. The plug-in will use them to search for the keyword text in your web page. It will wrap a link around the keyword and a class of .tooltip on the link.

Then call it like this:

  
    <script type="text/javascript">

    $(function($){

      var keywordDictionary = [
        {
          keyword: 'lacinia',
          definition: 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.'
        },
        {
          keyword: 'Mauris',
          definition: 'Etiam at risus et justo dignissim congue.'
        },
        {
          keyword: 'consectetur',
          definition: 'magna diam porttitor mauris, quis sollicitudin.'
        },
      ];

      $('body p').keywordize({
        dictionary: keywordDictionary
      }, function(){
        $('a[title]').popup();
      });

    }(jQuery));

    </script>

I decided to use the semantic-ui popup module to display the definition of the keyword that I wanted to define. Here is a link to that: Semantic-UI Popup Module.

Keywordize.js Demo

Hover over the links in the paragraphs below to see keywordize in action.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus.

Hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse.

Dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.

Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet.

Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue.

Sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus.

Luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris.