<!--
/*
* 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>
|
Download
