Fork me on GitHub

Wordsmith is a jQuery plug-in that adds on-demand word definitions to your site


See it in action: Double click or select any word on this page


Seamless integration: Wordsmith is easily added to your existing web page by including jQuery, the Wordsmith javascript file and then by simply calling the Wordsmith plug-in with the selector(s) you wish to attach Wordsmith to:

$(function() {
	$('.container').wordsmith();
});


Plug-in Options: Wordsmith defaults can be customised with the following options:

maxWordLength
18
Defines the maximum length of a highlighted word that Wordsmith will attempt a word definition lookup for. If the highlighted or selected word exceeds this amount the Wordsmith lookup icon will not be shown.
popupWidth
600
Sets the width for the Wordsmith word definition popup when displayed.
popupHeight
400
Sets the height for the Wordsmith word definition popup when displayed.
lookupImage
http://getwordsmith.co/images/Question_Mark.png
Sets the icon image that appears when a word is highlighted or selected that the user clicks on to see the word definition popup box.
lookupMessage
Lookup definition
Sets the tooltip text for the lookup icon image that is shown when a word is highlighted or selected.
lookupUrl
http://define.getwordsmith.co/{word}
Sets the remote URL to the server that will provide word definition lookups for the selected or highlighted word. The definition is shown in the Wordsmith popup. The {word} token will be replaced with the actual word being looked up.

Example of changing Wordsmith options:

// example of using options to change Wordsmith defaults
$(function() {
	$('.container').wordsmith({
		maxWordLength: 20, 
		popupWidth: 700, 
		popupHeight: 450, 
		lookupImage: 'http://placehold.it/28x28', 
		lookupMessage: 'Click to lookup this word definition',
		lookupUrl: 'http://mywordlookupserver.com/{word}'
	});
});

Wordsmith Word Definition Server: The word definiton server is a simple Sinatra based implementation that uses the Wordnik API. You can learn more about Wordnik here and get the source code for the Wordsmith word definition server from our GitHub page. You will need to obtain your own Wordnik API key before you can use the server.