Automatic Text Tooltip

[MJH]

1) CODE TITLE: Automatic Text Tooltip

2) AUTHOR NAME: MJH

3) DESCRIPTION: Quickly create a tooltip for words and phrases contained in your web document, with minimal hand coding. Wrap all the text, not each word or phrase, in a <div> or <span> like this: <div id="subjectMatter"></div>, then choose the words and/or phrases, along with their definitions, for the tooltip by editing a simple array like this:

       nPairs[nPairs.length] =	"numb >"			+ "unable to experience any sensation";
	nPairs[nPairs.length] =	"Davenport >"			+ "the name of the|fictional city in which|this story takes place";
	nPairs[nPairs.length] =	"slushy >"			+ "wet, with partially|melted snow";
	nPairs[nPairs.length] =	"beautiful wings >"		+ "the visually pleasing|feathered appendages of|birds that allow for flight";
	nPairs[nPairs.length] =	"countdown >"			+ "counting backward to|indicate the time remaining|until an event";
	nPairs[nPairs.length] =	"velvet interrogations >"	+ "friendly, yet persistent questions";

No other changes to your markup are necesssary other than inserting the "subjectMatter" <div> or <span>.

The code will then automatically find every instance of those words and phrases and wrap them in specially styled <span> tags. Onmouseover the tooltip will be displayed.

The tooltip always displays toward the center of the window, regardless of the position of the hovered element within the document or the size of the browser window.

4) ATTACHED BELOW: .zip file containing the code and demo.

[jscheuer1]

This sounds very nice (I haven't tested it, but may get around to that). I like the idea of not needing to individually number the array entries, as it makes it easier to cut and paste to make more. I'm thinking though, if that doesn't need to be in the global scope (perhaps even if it does) that it might work out even easier if it were made into a function. I'll be testing that concept as regards arrays in general right now.

Just as a word of advice though, to give your scripts a better chance of being picked up by Dynamic Drive, if that's important to you, provide a live demo page.

[rangana]

Awesome. Works great!

[jscheuer1]

Finally got around to testing it, the demo you provide works well in FF, IE, and Opera. As I said before, provide a live demo - it will increase your chances of being picked up by DD and/or others.

P. S. I tried out the function idea I mentioned earlier, both as a discrete function and as an array prototype. Both worked, but unfortunately (as far as I can determine) must precede the array definitions in the code to work. This could be made transparent though in a situation in which a subsidiary config script follows an internal or external main script on the page.

[MJH]

Thanks for testing it, guys.

I cannot provide a live demo, still, I hope that many people find a use for it, or tell others about it.