Working Around MooTools’ Tips / Rel=”NoFollow” Bug

By  on  

In MooTools 1.2, we saw the format of the MooTools Tip go from:

<a href="somewhere.php" class="tooltip-me" title="Title::Text">Tooltip Link</a>

... to ...

<a href="somewhere.php" class="tooltip-me" title="Title" rel="Text">Tooltip Link</a>

The one problem that this brought was that sometimes you don't want a search engine to follow a link, in which case you would add the following to the link element:

<!-- where do we put the text? -->
<a href="somewhere.php" class="tooltip-me" title="Title" rel="nofollow">

Obviously there's a conflict here as no one wants "nofollow" to be their tooltip's text. There are a few solutions to this.

1. Remove & Replace the Rel Attribute Before Creating Tips

	
$each($$('.tooltip-me'),function(el) {
	el.set('rel',''); //removes it
	// or
	el.set('rel','This is my tooltip text');
});
	

It's up to you whether you'd like to replace the "nofollow" text or simply remove it.

2. Revert to Title::Text in the Title Attribute

$$('.tooltip-me').each(function(el) {  
	var content = el.get('title').split('::');  
	el.store('tip:title', content[0]);  
	el.store('tip:text', content[1]);  
}); 

I prefer this method and used it in my previous MooTools tooltips article. You can follow the progress of this open MooTools ticket here.

Recent Features

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!