Converting an old v1.1 implementation of basic MooTips to v1.2 requires just a couple of steps. However, keep in mind that the 1.2 Tips object is strictly meant as a tool tip. You cannot hover over the tip, so there is no built-in way to add interactivity with your tip.
First, the CSS needs to be changed because the underlying element structure of the tip has changed (see a prior post on MooTools.Tips in v1.2 for example css).
The new html structure looks like the following:
<div class="options.className"> <div class="tip-top"></div> <div class="tip"> <div class="tip-title"></div> <div class="tip-text"></div> </div> <div class="tip-bottom"></div> </div>
Next, you need to import your Title::Text from the “title” attribute of your tip anchor.
<span id="myTip" title="This is the title::This is the text"> Hover over me to see a tooltip </span> <span id="myTipAjax" title="AJAX::myurl.html"> Hover over me to see a tooltip retrieved via MooTools.Request </span>
The following function parses out the “Title::Text” from the tip anchor and uses element storage to assign it to the tip. It can also handle an “AJAX::url” format (Note the double colon).
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) {
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;
}
}Finally, the last thing to do is to wire up the Tips at “domready”:
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
});
});See the full code and demo at http://www.uhleeka.com/archives/mootools/1.2.1/tips-convert-v11/
I get the following error when I use the following code
Error: c.getParent is not a function
<li class="list-li" id="myTipAjax" title="AJAX::galleryTips.jsp">
<a class="list-a" href="rock_climbing_gallery_Kanaga.jsp" >
<font class="list-font">
Kanaga
</font>
</a>
</li>
galleryTips.jsp
<div class="options.className">
<div class="tip-top">Hitesh</div>
<div class="tip">
<div class="tip-title">Good</div>
<div class="tip-text">Text</div>
</div>
<div class="tip-bottom">find</div>
</div>