Dynamic Word Definitions In JavaScript – underlinedef.js

Preview:

Description:

This is the pure JavaScript version of the jQuery Underlined Definitions plugin which automatically adds underlines to matched words within the document and displays pre-defined definitions in a tooltip when mouse hover.

How to use it:

Import the minified version of the underlinedef.js library into the html document.

<script src="js/underlinedef.min.js"></script>

Prepare your own words and their definitions in the JavaScript as these:

let words = ["JavaScript", "AJAX"],
    definitions = ["JavaScript is a high-level, interpreted programming language.", "Ajax is a set of Web development techniques using many Web technologies on the client side to create asynchronous Web applications."];

Initialize the underlinedef.js on the target text container and done.

underlineDef(".text", {
  words: words,
  definitions: definitions
});

Specify the search engine you want to use. Available search engines: Google, Wiki, Yandex.

underlineDef(".text", {
  words: words,
  definitions: definitions,
  search: 'google'
});

The default CSS class that will be attached to the matched words in the text.

underlineDef(".text", {
  words: words,
  definitions: definitions,
  underlineClass: 'underline-definitions'
});

The default tag name for the matched words.

underlineDef(".text", {
  words: words,
  definitions: definitions,
  tagName: 'span'
});

Specify the attribute to hold the definitions.

underlineDef(".text", {
  words: words,
  definitions: definitions,
  attr: 'title'
});

Decide whether to prevent the default event of the element.

underlineDef(".text", {
  words: words,
  definitions: definitions,
  preventDefault: true
});