MooTools 1.2 Tooltips: Customize Your Tips

Discussion

1. Jesus DeLaTorre

   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. deef

   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. david

   @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. where_is_will

   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. david

   @where: Look here:

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

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

   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. naspinski

   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. david

   @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. naspinski

    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. david

    @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. david

    @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. david

    @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. david

    @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. where_is_will

    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. david

    @will: Works for me in IE7.
23. where_is_will

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

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

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

    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. Max

    @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. where_is_will

    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. Max

    @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. where_is_will

    @ 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. david

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

    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. david

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

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

    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. Robert Augustin

    Oops sorry for the double.
41. david

    @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. Robert Augustin

    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. david

    @Robert: It may be as easy as removing the following line element.erase('title');
44. Amir

    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. racks

    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. Robert Augustin

    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. david

    @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. Robert Augustin

    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. racks

    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. racks

    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. Aaron

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

    @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. carolinecblaker

    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. carolinecblaker

    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. SanjayU

    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. AppBeacon

    @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. Sheldon Lendrum

    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. david

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

    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. Sheldon

    @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. cesar

    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. David Walsh

    @cesar: Set the z-index of options.className very high.
75. cesar

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

    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. cesar

    @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. Ramon

    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. Jamin P.

    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. Jamin P.

    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. Adam

    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. Jamin

    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. Spyro

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

     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. pressage

     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. Ben Alls

     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. Jorge Santos

     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. Adam

     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. Bruno

     Hello David,

     When i put mouse over a link to show the tooltip, it shows under the arrow, its nice. If the link is on the bottom of the page, the tooltip show above the arrow, thats ok too!.. Now, if the link is in the right of the page and I put the mouse over it, then the page automatically resizes and give me a scroll =(. I would like to keep the tip only inside the window, and don’t scroll it. Can You help me Sir?
     Thanks a lot!”