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

Manuel Lemos

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

Level 3 StarStarStar

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

Downloadhtml-tooltip-2010-11-18.zip 20KB
Downloadhtml-tooltip-2010-11-18.tar.gz 19KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:356
This week:0
All time:108
This week:4Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.


  Pages that reference this package  
I have developed this tooltip object that can have the shape you want:

Latest pages that reference packages Latest pages that reference packages