Treehouse

MooTools 1.2 Tooltips: Customize Your Tips

By on  

I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually an image or link). Netflix is a perfect example of useful tooltips. When you hover over a movie title, a tooltip displays with a quick summary, cast list, and movie rating. Thanks Netflix -- you've saved me yet another page load!

Tooltips can also provide another method of website branding. Why throw a vanilla tooltip to the user when you can brand your website? MooTools 1.2 provides a Tips plugin that allows for easy-to-customize tooltips. Let me show you how to create a sweet, branded tooltip.

MooTools "Tip" Plugin Tooltip Structure

<div class="options.className"> //the className you pass in options will be assigned here.
    <div class="tip-top"></div> //useful for styling
 
    <div class="tip">
 
        <div class="tip-title"></div>
 
        <div class="tip-text"></div>
 
    </div>
 
    <div class="tip-bottom"></div> //useful for styling
</div>

This DIV structure, which is incorporated right into the Tips plugin, provides classes for each part of the tooltip. We'll be using every class above to create out tooltip.

The Images

Here are the images we'll need to create our tooltip:

tip-text.png ("sliver")
tip-top.png
tip-bottom.png

The sliver image above will let us stretch the tooltip as high as we want. Width will be explicitly set.

The Usage

<a href="javascript:;" class="tipz" title="Awesome, right?::This custom tooltip will help branding immensely!">My Tooltip Link</a>

The CSS

.tip				{ width:295px; font-family:tahoma,arial; background:url(tip-text.png) left top repeat-y; }
.tip-top			{ background:url(tip-top.png) top left no-repeat; height:26px; width:295px; }
.tip-title		{ color:#e95e25; font-weight:bold; margin:0 30px 0 50px; }
.tip-text		{ color:#000; padding:10px 30px 20px 50px; }
.tip-bottom		{ background:url(tip-bottom.png) left bottom no-repeat; width:295px; height:81px; }

You'll notice we're using a lot of background images, which we have to do because we can't inject images directly into the plugin's DIVs. I've put the sliver image in the tip class so that it stretches the entire height of the tooltip.

The MooTools JavaScript

//when the dom is ready
window.addEvent('domready', function() {
	
	
	//store titles and text
	$$('a.tipz').each(function(element,index) {
		var content = element.get('title').split('::');
		element.store('tip:title', content[0]);
		element.store('tip:text', content[1]);
	});
	
	//create the tooltips
	var tipz = new Tips('.tipz',{
		className: 'tipz',
		fixed: true,
		hideDelay: 50,
		showDelay: 50
	});
	
});

Once the DOM is ready, I'm going to parse and store the contents of the element's title tag, which I've separated using ::. Once the titles and texts have been stored, I use the Tips plugin on all anchors with the tipz class. I'm using fixed position tooltips (they wont move around with the mouse) and a delay of 50 milliseconds for both show and delay.

Fading Enhancement

tipz.addEvents({
	'show': function(tip) {
		tip.fade('in');
	},
	'hide': function(tip) {
		tip.fade('out');
	}
});

If you want to make your tooltip a bit more fancy, add the above code to allow the tooltip to fade in or fade out.

ydkjs-1.png

Recent Features

  • From Webcam to Animated GIF: the Secret Behind&nbsp;chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in...

  • Introducing MooTools&nbsp;Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating:

  • An Interview with Eric&nbsp;Meyer

    I've always wanted to interview Eric Meyer. His early CSS books are a big reason this blog exists today and the reason why I'm a web developer. Eric gave me some time to hit the history of CSS,...

Incredible Demos

  • MooTools CountDown&nbsp;Plugin

    There are numerous websites around the internet, RapidShare for example, that make you wait an allotted amount of time before presenting you with your reward. Using MooTools, I've created a CountDown plugin that allows you to easily implement a...

  • Dijit&#8217;s TabContainer Layout:  Easy Tabbed&nbsp;Content

    One of Dojo's major advantages over other JavaScript toolkits is its Dijit library.  Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates.  One very useful layout class is the TabContainer.  TabContainer allows you...

  • Create a Twitter AJAX Button with MooTools, jQuery, or&nbsp;Dojo

    There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be...

Discussion

  1. I am not sure why, but you can get the tooltip to show up without any text. Do you think its related to the fade in and fade out?

  2. Looking very neat indeed!

    Only problem that remains is when you move the pointer inside the tooltip-div, the tooltip will remain visible without the text. Other than this small issue, this is really elegant eyecandy.

  3. @Jesus,deef: I did my best to rid of it myself, but I think the Tips class itself may need a bit of work. Another quirk is that the “hideDelay” and “fade” conflict. hideDelay will hide the tip, then the “fade” will show the tip again, and then fade out. I think it’s a core plugin issue.

  4. Thanks for this it is perfect for me – I am using it to pop testimonials in a way that matches the client’s pdf perfectly. A newbie question – is there a way to centre the pop-up rather than have it opening on the right?

    The link is up against the edge in my design, and I could do with the pop-up on the left of the link. Could you give me an idea where to look?

    Cheers,

    Will

  5. @where: Look here:

    http://docs.mootools.net/Plugins/Tips

    I believe you want to use the “offsets” option.

  6. Got it in one. Well played indeed sir. Cheers!

  7. nerbles

    Is this even possible in mootools 1.1? I have given it some effort with no success and I am not sure if it is a case of missing the obvious or it’s just not doable.

  8. Unless you are going to use large show and delay settings, wouldn’t this just be cleaner to use pure CSS and cut out the Moo Tools?

  9. @naspinski: Going the javascript route gives you more options, but I can see CSS doing a decent job too. I generally go with the solutions that provides more options.

  10. forn

    I would love to see a css only implementation of this. I love the idea, unfortunately I have to deal with a number of ‘no javascript’ browsers in our environment.

  11. I put together a css tooltip tutorial a while back here http://naspinski.net/post/css-Tooltips–tutorial.aspx – it doesn’t include an imaged background, but that would be easy enough to add in.

  12. dom

    I’ve been trying to convert all of my old 1.11 scripts to 1.2 (of course everything broke) .. so I’m starting w/tooltips thinking this is the easiest place to start and yet I can’t get it to work after downloading 1.2 and following your tutorial. So out of frustration I downloaded your version of mootools and it works. I opened both up to compare and see yours is ‘version’: ’1.2dev’ and the one I downloaded is version:”1.2.0″,build:”” … am I missing something in the download or are you using the beta 1.2 for this example?

    Thanks! Love the info you provide btw.

  13. @dom: Oops. I’ve updated to the 1.2.0 version of Moo and everything still works. What problem are you having?

  14. dom

    idk .. I’m starting to think I’m a complete moron re: downloading the latest version. I was having conflicts w/slimbox so I downloaded the latest version of that bundled w/1.2 and THAT didn’t work either (slimbox did). For whatever reason I can only get your tut to work using your version of mootools (moo1-2.js). I’m really frustrated w/this release. I click on core > download then more > download, link to both of them and nothing.

  15. @dom: I did notice problems when trying to download the “more” javascript with compression, so I checked “No Compression” and that worked. If you want, you can just download the following file from this site:

    http://davidwalsh.name/dw-content/moo1.2.js

    It has “Core” and “More” all in one file. It’s been updated 1.2.0 final.

  16. dom

    Thanks a million! Works like a charm.

  17. dave

    Awesome! Thanks for the code. I do have one question though. What if you want the href to actually have an address that goes somewhere? Is there another way to trigger the popup without using the href?

  18. @dave: The “href” has no bearing on the tooltip at all — it can be anything.

  19. elvisparsley

    At last there is a tut about mootools 1.2 tips. This is the first and great tut.
    Thanks David, you saved us.
    I have a question. Do I have to use <a href=”javascript:;”….? Can I use tag instead? I tried it but it does not separate title and text.
    Any idea?

  20. @Elvis: You can put any URL in there that you want. Another note: The tooltips “title” is the anchor’s “title” tag and the text comes from the “rel” attribute.

  21. Hi David,

    Back again – Everything is fine on FF / Safari but I’ve just started testing on the PC (nasty) and the tip is not appearing in IE7 – text is popping up but with no formatting or background images. Are there any issues with IE7 that might be causing this?

    Cheers,

    Will

  22. @will: Works for me in IE7.

  23. David, you are of course correct – sorry to be a muppet it was the @import css issue with IE, not your script. Thanks!

  24. I tried to built a tooltip like yours, but the “hideDelay” and “fade” conflict is really annoying. How did you solve the problem?

  25. @Max: I’ve not solved it, unfortunately. I did submit a ticket to MooTools though.

  26. Maybe I meant another conflict. As I did the fading using the code from mootools docs’ the tooltip was flickering once after leaving the link.

    var tip = new Tips($$('.tips'), {className: 'tooltip'});
    
    tip.addEvents({
    
            show: function(tip){
                tip.fade('in');
            },
    
            hide: function(tip){
                tip.fade('out');
            }
    });
    

    At your site there is no flicker, that’s why I looked at your changes and tried to solve the problem. I had to adapt the code to version 1.2, but now it works fine. Thanks! ;)

  27. elvisparsley

    This is my website with David’s script. It did not work before with 1.2 since I used to use 1.1.11.
    You can hover the pictures at the bottom.

    I gave up for sometime because it didn’t work with 1.2. Then here comes David. His script saved me.

    http://www.okadadesign.no

    It works fine with IE7, FF, safari and opera although the position of tips in IE is different.

    Thanks David.

  28. @Elvis: Maybe I am the only one, who sees the flicker, but I also recognized it on your site. You can take a look at this demonstration.

    @David: I used your tooltip image for my demonstration. I hope it’s alright.

  29. David – sorry to hijack your site for this!

    @Max – I moved to your code to get rid of the flicker, and it works perfectly, except for in (of course) IE7, when it seems to be is loading a black background behind the png. This is hardly noticeable on your demo as it is just the corner, but my site has a clear png and it’s very obvious. Is this just me? Feel free to have a look – at the demo. Thanks!

    Will

  30. @Will: Yes, I have noticed the black background viewing the site with IE7, but I believe it’s not preventable. Apparently IE7 replaces the alpha channel of an image by the black colour when adding an opacity with CSS. It’s very obvious when you change my code from:

    this.fx.start(1);

    to:

    this.fx.start(0.9);

    The black background will not hide until the opacity is set to ’1′.

    @Microsoft: There’s much work to do.. Hopefully IE8 will support it.

  31. @ Max:The only thing I found that you can do is just turn the duration right down so that you don’t see the alpha on the load. You do of course lose the fade in.

    There is also something weird that happens if you set the fixed to “true” in the ‘more moo-tools’ you get a very rapid flicker all the time, as if it is trying to reload every half second.

    Still – I’d rather have no fade effect than a flicker on this particular site as the link is a large button and the flicker v. noticeable. So props all round for developing this. It still rocks, even if MS has a way to go…. Cheers David et al.

  32. elvisparsley

    @Max
    Thanks Max for cooment about flicker and link. I appreciate it. I will try to fix it.

  33. Jack

    Thanks for this tutorial, it provided me a bunch of help. I am curious though, how would one get this to work with an onclick event? I was able to get the Tips working, but I need them to only show up when a textbox is clicked.

  34. @Jack: In that case, I think you’ll need to hack the Tips class a bit or create your own class.

  35. Thanks a lot for your tutorial, I got it to work just fine. I haven’t done much yet with mootools and JS, and this kind of help is greatly appreciated.

    Do you know of any issues with the Multibox plugin from phatfusion? The Tips funciton causes the < title> in the Multibox popup to disappear completely. It’s not a CSS issue – the title is just gone.

    My guess would be that this line

    element.store('tip:title', content);

    causes the content of the title tag to not be available anymore for Multibox. I could be wrong though :)

    Any ideas on this one?

  36. bibi

    I tired to implement your tooltip horizontally, but it’s not rendering correctly… My CSS is to blame, any suggestions?

    .tip { width:136px; font-family:tahoma,arial; background:url(../Images/Icons/ToolTipMiddle.png) left top repeat-xs; }
    .tip-top { background:url(../Images/Icons/ToolTipLeft.png) top left no-repeat; height:136px; width:131px; }
    .tip-title { color:#3F4B2D; font-weight:bold; margin:0 30px 0 50px; }
    .tip-text { color:#000; size:12px; padding:10px 30px 20px 50px; }
    .tip-bottom { background:url(../Images/Icons/ToolTipRight.png) right bottom no-repeat; width:29px; height:136px; }

  37. @Robert: Sounds like version issues to me. I thought Multibox was still Moo 1.2, where this post is about Moo 1.2.

  38. @bibi: Can you provide a URL? That would make things much easier.

  39. David,
    Yes, Multibox is for Moo 1.11 but I found a compatibility hack that makes it work for 1.2 without a problem:
    http://www.dilella.org/?p=64

    Do you think there could be a flaw with that? I’m open for suggestions :)

  40. Oops sorry for the double.

  41. @Robert: A Multibox 1.2 hack? Awesome, thanks for sharing that.

    Tips DOES remove the title element from the anchor. Unfortunately, you may need to hack the Tips class to prevent that.

  42. Sure, no problem!

    Ok then I at least know what the problem is now. If you know, can you give me a hint as to what function in the Tips class is responsible for removing the title element? Or what I should look out for. JS is rather new to me.

  43. @Robert: It may be as easy as removing the following line “element.erase(‘title’);”

  44. This code is clashing with a datepicker code that I have in place using moo tools.

    This is the error I am getting, although I am using your updated JS file at this url http://davidwalsh.name/dw-content/moo1.2.js

    Error: Json is not defined
    Source File: http://localhost/new_quotes/cal/DatePicker.js
    Line: 37

    Having problems with this line of code

    else if (el.alt) this.setOptions(Json.evaluate(el.alt));

  45. This line (element.erase(‘title’)) prevents slimbox from showing the title as well. Has anybody found a workaround to this?

    If you remove that line vanilla tooltips will start to show up together with the moo tip. How can you avoid this without erasing the title?

  46. David,
    thanks for the tip, I got around to try it finally and it does bring back the title for multibox, but I have the same problem as racks does. The vanilla tooltips show up.

    Before it is erased, the title is being stored in the variable “tip:title”:

    element.store('tip:native',element.get('title'));

    I tried to retrieve that variable for Multibox, but didn’t get it to work just yet.

  47. @Robert: Keep plugging away at it. The whole reason Moo got erases the title is to prevent the vanilla tooltip. You know, you could try using the link’s “rel” attribute instead.

  48. Right, I thought about using that, or even “inventing” another attribute like “thetitle” or anything else. The problem with “rel” is, I’m not sure if the Googlebot will not get confused with it when crawling the site. I’d rather be on the safe side. And the second idea doesn’t validate, of course.

    So I tried assigning the same content (that of the title attribute) to a second variable, which I wouldn’t erase and only use in Multibox – something like this,

    $$('a.mb').each(function(element,index) { 
            var mbcontent = element.get('title'); 
            element.store('mb:title', mbcontent); 
        }); 
    

    …but I couldn’t retrieve it in Multibox yet. I’m heavily reading up on JS right now :)
    I’ll let you know if I get it to work.

  49. WebApe

    OK, great script – Just ditched Jquery to do MooTools, BUT – I just cant seem to attach a class to the tip like: somecontent into the tip:text area, need help – Badly..

  50. WebApe

    when i say class, i mean a div class (hmmm, cant use () signs)

  51. By the way, if anybody has noticed, IE will show vanilla tips if the tooltips are used on images which have an “alt” tag as well. This can be solved by modifying the Tips class. In function “attach”, find the line element.erase(‘title’); and after it add

    var children = element.getChildren(‘img’);
    children.each(function(childElement){
    childElement.erase(‘alt’);
    }, this);

    This will find all child img tags and remove their alt attribute.

  52. Hi all. About the title erase thing, I tried something today which works rather inconsistently, but I’m posting here so that maybe sb comes up with the solution. In tips, after

    element.erase('title');
    

    add

    element.addEvent('click', function(){
            element.setProperty('title', title);
          });
    

    Now, I’ve tested with Slimbox to see if it was showing the title and it worked rather inconsistently, sometimes the title was shown, sometimes not. I guess it has something to do with the DOM being called by Slimbox before the property change was committed.

    I’ll keep posting if there’s any update.

  53. Panos

    There is a problem when i try to apply the “tips effect” with a picture instead of a word or sentence. The “tips pop-up” isn’t steady

  54. David- have you had any luck with fixing the fade vs. hideDelay/showDelay bug? Where the tooltip fades, but then reappears again?

  55. @Aaron: Not yet, and I pretty much gave up. I’m hopping that Moo 1.2.1 will fix the problem.

  56. ktsixit

    I would like to ask…. how can I create more that one tooltips in a page, each of them with different css look? can you give a piece of code?

  57. I’m with ktsixit – I would like to apply ID’s to these, based on element.id, to get them to anchor based on absolute positioning. Any clues?

  58. Michael Federici

    I don’t see if anyone already mentioned this but your tooltips won’t look correct in IE 5.5 – 6 because IE doesn’t handle transparent PNGs properly. You’ll need to add a filter rather than a background URL if the user is using IE 5.5-6.

  59. Any chance of getting a good tutorial or explanation link for what a “filter” is and how/where its added?

  60. Michael Federici

    Well I don’t have a link handy but i’m sure if you google ‘css filter’ you’ll get plenty of tutorials. Basically its a css property used in IE. What you want to do if you want the tips to work properly in IE is basically replace the background css properties with filters:

    background:url(tip-bottom.png) left bottom no-repeat;

    becomes

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’tip-bottom.png’).

    Now other browsers don’t know the filter property (like FF) so you’ll have to have some logic to use the filter for for IE5.5-6 users and use the background for everyone else.

    One final note: the filter cannot be repeated so for the text part you have to scale it for it to show up properly:

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’tip-text.png’, sizingMethod=’scale’)

    I hope that helps.

  61. Sorry..got anxious…

    Disclaimer: I don’t think this breaks anything else.

  62. nikhil

    Hi david .. I’m totaly new to programming and the mootools. i was trying to implement the the toolstip. but its not working this is the code i’m using..

    window.addEvent('domready', function() {  
            var Tips1 = new Tips($$('.Tips1'));
    
     });         
    

    I have downloaded the js files from mootools website and the css is also from mootools. Please don’t ignore this post really needs help

  63. James

    Using the latest versions of mootools core and more, can’t this tutorial working.

    Pasted in the css exactly, added the “tipz” class to my anchors and pasted in the javascript correctly.

    There aren’t any JS errors but the title appears in a vanilla html style with “tip title::tip body”

  64. @David

    Another great tutorial. I’m using it again on the site to help teach users what my icons do.

    Question : Any clue why the tool tip pops up so far to the right in FF? It’s correctly positioned in Safara and IE7.

  65. T.J.

    For anyone trying to get rid of that flicker when using the fade, I think I found a work-around (currently only fading in).

    var tips = new Tips($$('.moo_tips'), {
            className: "mootips",
            showDelay: 500
        });
        tips.tip.setStyle('opacity', 0);
        tips.addEvent('show', function(tip) {
            tip.fade(0.8);
        });
        tips.addEvent('hide', function(tip){
            tip.setStyle('opacity', 0);
        })
    
  66. Hi David, Thanks for the Great Article, I am using the TIP’s on here http://staging.totali.co.nz for Calendar events, but you can change months on the Calendar via an AJAX request, now I lose the DOM READY-ness to make the new event tips work,

    Do you have any ideas on how I can ‘restart’ the DOM, or make these tips work ?

  67. @Sheldon Landrum: I think the tooltip “attach()” function may be up your alley.

  68. Here is my little tip, make sure that your tip offsets do not overlap with your cursor position otherwise your tips will flicker

  69. Nikhil

    Is it possible to add a close button to the tooltip

  70. Birke

    Does someone know, how to ad or change the offset?

  71. @Birke

    http://davidwalsh.name/mootools-12-tooltips-customize#comment-1974

    http://docs.mootools.net/Plugins/Tips

    offsets – (object: defaults to {‘x’: 16, ‘y’: 16}) The distance of your tooltip from the mouse.

  72. Bryan

    Im having the same problem with the DOM after a AJAX… Tried using the attach and it still doesnt work.

    http://www.medsupplier.com/Products/Burdick-Atria-3100-EKG__1222-A31-1EK01.aspx

    Click on and expand “for more information…”
    Hover over “a31-1EK01 – Atria 3100…”
    Tooltip works
    Click on it.

    Re-expand “for more information…”
    Hover over “a31-1EK01 – Atria 3100…”
    Tooltip does not work.

  73. Having issues with the tip hiding behind images in Firefox. Is there a way to force it to show on top of everything else? FYI, the image that is covering the tip has the style “position:absolute; z-index:3;”. Thanks.

    See this link text

  74. @cesar: Set the z-index of “options.className” very high.

  75. @David – very quick… but where is “options.className?”

  76. I do see where the “options.className” is in your example above, but i dont have that code on my page. I use the code like you do in the source of the demo page. Which has no “options.className”. Thanks much.

  77. Amos

    david, I’m a newbee. help. where do the “MooTools “Tip” Plugin Tooltip Structure” DIVs go?? I cant find them anywhere in the source code of your demo page. What am I missing? Thanks

  78. Kevin

    is there an easy way to add in new calls of class=”tip-top”? I want to have multiple products pulled in as background images and I can simply plug them in as a background image if there is an easy way to customize this? So if I have 4 products, I’d like to call in class=”tip-top”, class=”tip-top2″, class=”tip-top3″ and class=”tip-top4″. Here is a sample link that I’m working on: http://www.govector.com/_jmoney/. the second item under the products tab has the tip and the background set already, I’m just looking for a way to write different background images by calling a custom class. Any help is appreciated.

  79. hypknight

    @cesar: I noticed you didn’t get a response yet. I had to figure this one out as well. If you copy and pasted david’s example code, and used ‘tipz’ as the classname, you need to add the following to your CSS.

    .tipz {
    z-index: 100;
    }

    Mootools injects a div with this CSS class applied to it.

    Hope this helps!

  80. amos

    Thanks!

  81. @hypknight – thanks much, i will give it a try.

  82. Deak Phreak

    This worked for me without the flicker issue

        $$('a.tipz').each(function(element,index) {
            var content = element.get('title').split('::');
            element.store('tip:title', content[0]);
            element.store('tip:text', content[1]);
        });
    
    
        var tipz = new Tips($$('.tipz'), {
            timeOut     : 700,
            maxTitleChars   : 50,
            hideDelay       : 200,
            className       : 'tipztop', //for you yo use in the css classes being then .tip .tip-title and .tip-text
            initialize: function() { this.tip.fade('hide'); },
            onShow        : function(tip){
               tip.fade('in');
            },
            onHide: function(tip) {
                tip.fade('out');
            }
        });
        myTips.tip.set('tween',{duration: 200});
    
  83. No matter what I try I always get the “Tips is not defined” error. I got the full version of Mootools 1.2 but nothing works,… any idea what could be wrong?

  84. Aicke Schulz

    @Ramon: You need MooTools More

  85. Aicke Schulz

    The “store titles and text” part can be replaced with the following Tips options (in 1.2.2):

    title: function(element) {
    return element.get(‘title’).split(‘::’)[0];
    },
    text: function(element) {
    return element.get(‘title’).split(‘::’)[1];
    }

    but only if you switch the following lines in the Tips() code:

    element.erase(‘title’).store(‘tip:native’, title).retrieve(‘tip:title’, title);
    element.retrieve(‘tip:text’, read(this.options.text, element));

    it’s somtimes nearly twice as fast

  86. I would just Like to say Thank You To David Walsh and as well to everybody who commented here especially hypknight for the z-index even though it was so obvious you made it happen. Thanks everybody!

  87. P.S. If you wanna see it

    http://www.bidreach.com

  88. manju

    Is there a way we can give an anchor tag in the tooltip which the user can click and go to the respective url for more info. For eg., I have used a for loop to show links from 5 different feeds. Now I want to show the link address in the tooltip on hover. I did it using onmouseover and onmouseout, but the problem is the tooltip comes at a single place on the page and not besides the respective anchor. also as I have used getElementbyId, it shows the link for the first feed only for all the anchor tags and not their respective links. Please if someone can look into it and tell me how do I go about doing it.

    Thanks.

  89. ips

    HINT:
    to get the offset option to work, use “offsets: {‘x’: 16, ‘y’: 16}” instead of “offset: {‘x’: 16, ‘y’: 16}”

  90. Matt

    If you get the js error “tips is not defined” and you’re working with version 1.2.3, you will need to download the mootools-1.2.3.1-more.js file. Tips has been separated from the core file in the latest release.

  91. Daniel

    Ehm, I know this is Mootools, but can anyone point me into the right direction, on how to port this to jquery?

  92. Personally, I don’t like the fact that this type of function requires a loop through the page on each refresh. It’s kind of a waste if people don’t even bother using the tooltips on the page. Depends how you want to go about it I guess. I just have .php function that produces the html for a tooltip with a mouseover on it. That mouseover then runs the tooltips function on that single element (#elementid) rather than all class types of (.className) on the page.

    Might be worth thinking about as too many of these things on your page that run on dom ready could get messy.
    Great example of how to use it though all the same!

    Thanks :)

  93. Hybris

    Fade Out problem can be solved with this code, check this out:

    http://www.consideropen.com/blog/2008/09/30-days-of-mootools-12-tutorials-day-19-tooltips/

  94. ben

    I had a positioning problem with the tip so i changed the fixed: true, to fixed: false, and problem fixed. hovers where it should now.
    The other thing i added was the fade in – out piece of script but, it fades in but not out. other than this, very happy, great tip!

  95. Michael

    Hello,

    It works great! One issue for me…
    I have input text boxes and I want the tip to appear on the right.
    So the offset will depend on the element.
    I tried

    $$('a.tooltip').each(function(element,index) {
    		var content = element.get('title').split('::');
    		element.store('tip:title', content[0]);
    		element.store('tip:text', content[1]);
    		element.store('tip:offsets', {x:element.width,y:0});
    	});
    

    Wrong guess… In fact, I did not manage to store the offset.
    What is the good way to do it?
    Thanks guys, and girls
    MIchael

  96. Hey so if any of you were wanting to put images in the tips you can visit my site and take a look at my code here

    http://www.jaminproud.com/?page_id=11

    I had to tweak the tips class a little bit and basically make a few different css classes for each image I wanted. Hope it helps.

    • Luke

      RE: images in the tooltip.

      the website for the example (http://www.jaminproud.com) keeps ‘timing out’. can anyone offer any help with images in the tooltip?

      awesome tooltip btw! love your stuff david

  97. Jim

    Further to the subject ‘customizing tooltips’.

    This is a great tut on customizing the images within the existing generated HTML structure.

    Whats missing for me now however, is how we go about further customizing the contents. ie: How can I insert some span classes into the tip-text for more detailed tooltips?

    Can anyone help me out there?

  98. Thomas

    Just got a question about the whole offset thing. The link http://mootools.net/docs/core/Plugins/Tips doesn’t work anymore you see so I can’t check if the answers there.

    My tip has a pointer on the top, you know, to indicate where you rolled over. In my example it’s a calendar – you get information about what happens on a date when you hover over it.

    The problem is that the calendar is on the right of the page, so if you view a day on the right of the month, the “edge-of-the-page” offset change kicks in.

    Can you tell me of a way to either:

    a) Turn this off so the tip can go outside of the page

    b) Tell it to switch the class of the tooltip when the “edge-of-the-page” thing happens. This is so I can mirror the background image and make the pointer appear on the other side.

    Thanks and thanks for the great tutorial :-)

  99. Is it possible to get Tip text by Request (Ajax)?

  100. Hello,

    I have some problems with my MooTools tips on my website on this page :
    http://www.sub-info.net/index.php?mod=monsters

    Just bring your mouse on the small icons on the last column of the table and you won’t see any tooltip except if the small icon is near the extrem right border, then you will see that the tip is under the main design.

    So I’ve read that I have to increase the z-index but I’ve given it some value (from 10 000 to the max integer value) and the tip is still under de main design…

    May somebody help me please? :)

    Thanks.

  101. Just finished my website and the designer used Mootools. Is this any good?????

    http://www.pressagecreative.co.uk

    any comments (please be positive – it’s been a massive undertaking) wouls be welcome.

    Thanks

  102. JayR

    For some reason in IE7, when I add any options it fails. EG:

    This fails for me in IE7:
    var toolTips = new Tips(‘.tooltip’, { className: ‘custom_tip’ });

    This works (functionally but looks terrible):
    var toolTips = new Tips(‘.tooltip’);

    Anybody got any ideas?

  103. Nenad

    Hi,

    is there way not to hide the tooltip when the mouse is over it, and to hide on mouse leave??

    Any ideas?

  104. jay

    I see this mentioned a few times but don’t really seen answer here yet. When tips are part of content that’s the result of Request.HTML (ajax) the tips don’t work. DOM issue. I’ve added var myTips = new Tips(‘.tooltip’); onComplete of the Request.HTML – still doesn’t properly handle the ajax generated tips. Anybody have a solution?

  105. David! I’m a newbie trying to get SlimBox to read the alt vs title. I don’t want all the html code showing up in the ToolTip on MouseOver. Got it to work in IE but not FF or Safari. Any ideas? Please excuse all the random code on the page, developmental left overs. LOL

  106. I have the code working but, I cannot do this inside of an accordion. Is possible to do that?
    Thanks a lot. I’m a real newwbie.

  107. ildefonso

    Hi david, I used your code and put inside a select option tag, It works fine in Firefox, but in IE doesnt, do u think is a IE issue ?

    Thanks a lot.

  108. Girish

    Hi,
    How we can set limit for dragging area for drag elements.
    I want dragging in limited area. Please help…..

    Thanks,
    Girish

  109. Is it possible not to hide the tooltip after the cursor is on it? It would be useful for the links in tooltips.

    Thanks in advance for the help!

  110. Luke

    RE: images in the tooltip.

    the website for the example (http://www.jaminproud.com) keeps ‘timing out’. can anyone offer any help with images in the tooltip?

    awesome tooltip btw! love your stuff david

  111. Kirupananthan.G.S

    the following error came in ie9 ERROR: INVALID_CHARACTER_ERR (5)

    URL is : http://davidwalsh.name/dw-content/custom-mootools-tooltips.php

  112. [...] MooTools 1.2 Tooltips: Customize Your Tips [...]

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

Use Code Editor