hi,all
My 'Easy Tooltip Using MooTools',IE bugs
line:86
error :$('tooltip') object is null
I can not solve it !!!!!
the demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
/* */
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
/* */
</style>
<script type="text/javascript" src="mootools-1.2.4-core-yc.js"></
script>
<script type="text/javascript">
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$$('a.tooltip').addEvents({
'mouseover': function(event) {
this.t = this.title;
this.title = "";
var newPElement = new Element('p', {
'id': 'tooltip',
'html':this.t ,
'styles': {
'top': ( event.page.y - xOffset) + "px",
'left': (event.page.x+ yOffset) + "px",
'display':'block'
}
});
$(document.body).grab(newPElement);
},
'mouseout': function() {
this.title = this.t;
$('tooltip').dispose();
},
'mousemove':function(event){
$('tooltip').setStyles({
'top': (event.page.y- xOffset) + "px",
'left': (event.page.x + yOffset) + "px",
});
}
});
};
// starting the script on page load
window.addEvent('domready',function(){
tooltip();
});
</script>
</head>
<body>
<h1>My Easy Tooltip Using MooTools,IE bugs</h1>
<p><a href="#" class="tooltip" title="Web Standards Magazine">Roll
over for tooltip</a></p>
<p>or <a href="#" class="tooltip" title="Easiest jQuery Tooltip">go
back</a> to the article</p>
</body>
</html>
