Results 1 to 5 of 5

Thread: Automatic Text Tooltip

  1. #1
    Join Date
    Nov 2008
    Posts
    40
    Thanks
    2
    Thanked 8 Times in 8 Posts

    Default Automatic Text Tooltip

    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:
    Code:
           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.
    Last edited by MJH; 11-15-2008 at 01:33 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Awesome. Works great!
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  4. The Following User Says Thank You to rangana For This Useful Post:

    MJH (11-16-2008)

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 11-16-2008 at 03:59 AM. Reason: sense & add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    MJH (11-16-2008)

  7. #5
    Join Date
    Nov 2008
    Posts
    40
    Thanks
    2
    Thanked 8 Times in 8 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •