Warning: count(): Parameter must be an array or an object that implements Countable in /nfs/c01/h05/mnt/6385/domains/uhleeka.com/html/blog/wp-content/plugins/uhleeka-codebox/uhleeka-codebox.php on line 65
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>