HTML Tooltip: Show tooltips for given HTML page elements

Recommend this page to a friend!
  Info   Example   Screenshots   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 356 All time: 108 This week: 4Up
Version License JavaScript version Categories
html-tooltip 1.0.0BSD License1.0HTML
Description 

Author

This object can be used to show tooltips for given HTML page elements.

It can show tooltip messages when the user drags the mouse over one or more page elements.

The tooltip message can be defined with any formatted HTML content. The template of the tooltip container can be configured.

The tooltip messages can show and hide smoothly using fade-in and fade-out effects.

Picture of Manuel Lemos
  Performance   Level  
Name: Manuel Lemos <contact>
Classes: 11 packages by
Country: Portugal Portugal
Age: 55
All time rank: 21 in Portugal Portugal
Week rank: 6 Down1 in Portugal Portugal Equal

Example

<!-- /* * testHTMLTooltip.html * * @(#) $Id: testHTMLTooltip.html,v 1.2 2010/11/18 09:20:37 mlemos Exp $ * */ --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="en"> <head> <title>Test the HTML Tooltip Object</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="animation.js"></script> <script type="text/javascript" src="htmlTooltip.js"></script> <style type="text/css"> body { font-family: arial, helvetica, sans-serif; } .box { padding: 10px; border-style: solid; border-width: 1px; border-top-color: #E1E1E1; border-left-color: #E1E1E1; border-bottom-color: #999999; border-right-color: #999999; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .tooltip { background-color: #CFCFCF; } .target { background-color: #FFFFDC; } </style> </head> <body> <h1>Test the HTML Tooltip Object</h1> <div id="target" class="target box">Drag the mouse here to show the tooltip.</div> <br> <div id="another" class="target box">Another area with a tooltip.</div> <script type="text/javascript"><!-- /* * Create the HTML Tooltip object */ var tt = new ML.html.htmlTooltip(); /* * You can redefine the HTML template for tooltips */ tt.template = '<div class="tooltip box">{content}</div>'; /* * Make the tooltips fade in or fade out */ tt.fade = true; /* * Display messages in the console when errors occur */ tt.debug = true; /* * Add tooltip to element 'target' */ tt.addTooltip({ id: 'target', content: 'This is a <b>tooltip</b>!' }); /* * Add tooltip to element 'another' */ tt.addTooltip({ id: 'another', content: '<b>Another tooltip</b>:<br>This one takes<br>multiple lines.' }); // --></script> </body> </html>

Screenshots (1)  
  • html-tooltip.png
  Files folder image Files (4)  
File Role Description
Plain text file htmlTooltip.js Class HTML tooltip object
Accessible without login Plain text file testHTMLTooltip.html Example Example tooltip page.
Accessible without login HTML file testHTMLTooltipOutput.html Output Sample output page

 Version Control Unique User Downloads Download Rankings  
 0%
Total:356
This week:0
All time:108
This week:4Up