<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MooTips</title>
<script type="text/javascript" src="mootools-1.2.1-core-yc.js"></script>
<script type="text/javascript" src="mootools-1.2-more.js"></script>
<script type="text/javascript">
function SetTipStorage(element) {
// create an array including the title at
// position 0 and the text at position 1
var content = element.get('title').split('::');
switch(content[0]) {
case 'AJAX':
var req = new Request({
url: content[1],
method: 'get',
onFailure: function(xhr) {
alert(xhr.status + '\n' + xhr.statusText);
element.store('tip:title', 'ERROR');
element.store('tip:text', 'Ajax request failed');
},
onSuccess: function(responseText, responseXML) {
content = responseText.split('::');
// use the element storage functionality
// to store the title and text for the
// specified element
element.store('tip:title', content[0]);
element.store('tip:text', content[1]);
// remove the element title
element.title = '';
}
});
req.send();
break;
default:
// use the element storage functionality
// to store the title and text for the
// specified element
element.store('tip:title', content[0]);
element.store('tip:text', content[1]);
// remove the element title
element.title = '';
break;
}
}
window.addEvent('domready', function() {
var tips = new Tips();
SetTipStorage($('myTip'));
tips.attach($('myTip'), {
fixed: false,
showDelay: 0,
hideDelay: 0
});
SetTipStorage($('myTipAjax'));
tips.attach($('myTipAjax'), {
fixed: true,
showDelay: 0,
hideDelay: 0
});
});
</script>
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif;}
#TipHolder img { margin-bottom: 10px; }
#TipHolder h4 { text-align:center; margin:0px 0 2px 0; font-size:85%; }
/* MooTools.Tips */
.tip-top {
color: #fff;
width: 139px;
z-index: 13000;
}
.tip-title {
width: 123px;
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(bubble.png) top left;
}
.tip-text {
width: 123px;
font-size: 11px;
padding: 4px 8px 8px;
background: url(bubble.png) bottom right;
color:#fff;
}
.tip-text A {
color:#069;
}
.tip-loading {
background: url(ajax_load.gif) center center no-repeat;
width: 30px;
height: 30px;
margin: 0 auto;
}
</style>
</head>
<body>
<img src="moo.png" id="myTip" title="This is the title::This is the text" />
<img src="moo.png" id="myTipAjax" title="AJAX::lipsum.html" />
</body>
</html>
