MooTooltips – easy to make good looking tooltips
Friday, March 13th, 2009 in Mootools
MooTooltips gives you the possibility to create bubble tooltips on HTML elements in an easy manner and with the possibility to set each tooltip’s behavior individually. It’s also possible to display as tooltip content the content of an HTML element from the page, some text you want to input or the result of AJAX calls.
Tooltips can be set directly on the rel parameter of any HTML element and simultaneously when you create a new class instance.
For example, if tooltips are set directly on the element (let’s say an anchor), the rel parameter will have a value like: <a … rel=”{content:’some_element_id’}” and that’s it. The tooltip displayed will have as content the ’some_element_id’ content. Or if you there’s only the need to display some text, it will look like this: <a … rel=”{text:’Some text I want to display in my tooltip’}”. AJAX calls are also simple. To display the tooltip with some remote AJAX retrieved content, simply use as rel the following: <a … rel=”{ajax:’some_page.html’}”.
To start the inline declared tooltips, a CSS selector is needed so basically all tooltips declared on page must have the same CSS class in order to get the script started. Optionally, there’s the possibility the pass a container for the tooltips; if none is provided, the script will scan the entire document.
There are some more parameters that can be set on the element. The tooltip can be displayed on top of the element calling it or below it. To change the position, there’s a parameter called position that can be set with the values 1 (below the element) or -1(on top of the element).
One other this you could do is set the tooltip as sticky. To do that, set sticky:true on the element or the extra elements declared where you start the script.
Below is the complete list of parameters you can set:
- container: for inline declared tooltips, if you specify the container id, the script will search for tooltips in there; if not specified, it will scan the entire document if you provide it a CSS selector for the hovered parameter
- hovered: CSS selector for the tooltip elements. The css class is for the elements that display the tooltip when they are hovered
- extra: this parameter contains the elements you choose to manually add. To add extra elements, set this parameter as:
extra:{
0: {
’id’:'extra’,
’text’:'this text is added manually using the extra.text parameter.’,
’position’:-1,
’sticky’:false
},
1: {
’id’:'other_extra’,
’ajax’:'ajax.php’,
’ajax_message’: ‘Loading… please wait.’,
’position’:1,
’sticky’:false
}
}As you can see, for each element add to the extra parameter, you need to pass a few things. Except for the id, all the other parameters on each element are the same as the ones used on the inline declared elements.
- ToolTipClass: CSS class for the tooltips. This is a global parameter, all tooltips declared within a class instance will have the same CSS class. The tooltip HTML structure is as follows:
<div class="someCLass">
<div class="dockBottomHeader">This is the header.</div>
<div class="message">This is where the content is displayed.</div>
<div class="dockBottomFooter">This is the footer.</div>
</div>Except for the container CSS class ( this parameter’s value ), all other classes must be kept in the stylesheet. Also, the close buton CSS class must remain as is ( .sticky_close ) and the AJAX preloader class ( .loading ).
- toolTipPosition: besides setting the tooltip position on each element, you can use this parameter to define a default position for all the tooltips. This way, if one of the elements doesn’t have a position set, this one will be used. It can take as values -1 (on top) or 1 (on bottom)
- showDelay: tooltips can be delayed on showing. Basically, this will prevent the tooltips to display if the user passes the cursor over to get to another element, without the intention to hover the element having the tooltip.
- sticky: same as toolTipPosition, you can set this parameter to be the default value if sticky is not set on any of the elements that must display tooltips
- fromTop: distance in pixels from the element. By default, the tooltip takes as coordinates the element coordinates. If you need to display it a little further from the element, give this parameter a value. This applies to all tooltips declared on a class instance
- fromLeft: same as fromTop, but it controls the horizontal position of the tooltip
- duration: the tooltips fading/moving duration in milliseconds. Applied to all tooltips declared on a class instance.
- fadeDistance: on mouse out or close, the tooltip fades and moves away from the element. This variable determines how far from the element it will move.
Giving the fact that the tooltips can be positioned on top or bottom of the elements calling them, if by design they point at the element, the script will need to do some changes. As stated above, the inner divs for the tooltip header, message and footer have the CSS classes predetermined and I suggest not to change their names. When the tooltip displays below the element, it will have to point up. In the example page, the below display is set as default. For the tooltips displaying above the element, there are separate CSS classes that are switched for the default ones to make the tooltip point down at the element calling it. These CSS classes are: dockTopHeader and dockTopFooter and must have the same name in your stylesheet.
If you post any bugs, please specify the browser name/version you encountered problems with.
Related posts
Was this useful? Show your support.
78 comments
I love this script.
Except the close button not workin (non-clickable) in IE6.
The reason behind (literally) that is its container (.dockTopHeader) getting alpha transparency (no matter whether you do it via plain css, ie6f.htc or dd_belatedpng.js). It has to be removed in order to make the close button work.
Of course, it makes its rounded corners gray around. I solved this simply by removing the rounded corners like this:
*html .ToolTips .dockTopHeader {
background: #fff;
border: 1px solid #ccc;
border-bottom: none;
}
No background image, just html white and borders creating sharp corners.
I struggled hard to figure that all out. Maybe there is another way I couldn’t find.
Anyway.. the sticky close works under IE6 now and the tooltip looks good like nothing happened to it.
Hmmm.. do a test:
Create a sticky tooltip positioned at bottom. How does the close button behave? Pretty bad here. It might be caused by modified css, but I’m not quite sure. It seems to me like it’s your bad (button’s placed outside the tooltip).
Also.. why do I have to set position:-1 manually for each tooltip (in rel=”"), even if I set it to -1 in options? Otherwise it’s shown upside-down anyway. Don’t wanna be mean, but it should detect whether it’d go outside the screen and choose its position automatically (but first – the close button position fix).
The button placed outside… well, it’s not quite outside. It’s inside, but because the header background has the pointer, it looks like it’s outside. You can reposition it by CSS and make it look inside if you use the sticky_close CSS class as a header descendant :
ToolTips .dockBottomHeader .sticky_close { sticky button tooltip bottom styling here }
About your second problem, if you set the position parameter as -1 in options, all tooltips will appear on top. You don’t have to set it on every element, they will all display it on top. But if one element must behave differently and you want the tooltip on the bottom, you’ll need to set that specific element with position 1. That’s the reason for the position variable on both the class parameter and the element.
Now, about the repositioning if there’s no space below for example, that’s not implemented. It probably should be so I’ll make it an update.
Since you liked the script so much, I would be thankful if you could help me spread the word about it so I can get more opinions on it and improve it. Thanks for all your suggestions, they are most welcomed. If you implement this script on any of your projects, leave a link here so that all can see you implementation.
I will and I’ll let you know when it’s out. Now I’m about to make the tooltip black and transparent a little.
You are right about the sticky close position. I forgot there’s a different container for bottom tips. (Anyway, it should be predefined).
However, you misunderstood my second problem: I double checked – when there’s no “position:-1″ in a tipper’s rel=”", then “toolTipPosition: -1″ set in options doesn’t apply and it behaves like it’s set to 1. Really! It does. It’s not working as it should (and as you say), at least for me.
I thought maybe that’s because the tipper is placed in a table cell (TD) (maybe it limits it somehow, I guessed), but when I put it outside at the bottom of the page right before the end of the body (so nothing affects it), it acts the same – shows on bottom ‘causing the page to stretch vertically in addition.
If it works well for you, please create another demo page (with tooltipposition: -1 as default and no ‘position’ in tipper’s rel), so I can analyze it and see where I went wrong.
Oh, and for time saving’s sake – remove your logo from the bottom, so people don’t have to do it manually – everyone will do so / want to anyway, so the tips fit their design.
You were right. That one was a bug . I’ve updated the example and the download files. Now works as expected.
About the logo, it’s for demo purposes, but I suppose you’re right, people might want to implement it as is and that will only make things harder. I’ll update it. Thanks again for the report.
Great
Oh.. and in case of “spreading the word”, I believe you SHOULD publish at least a short note with the link in the two main community nests:
http://www.mooforum.net/scripts12/
and
http://groups.google.com/group/mootools-users/
I found your script by accident via Google this I’m the only one commenting. If you posted it there (especially the mooforum), I’d found it a long time ago as I’m always there
That applies to all your mootools works which I find very valuable. You will probably find a lot more feedback. I’m no mootooler, so I can’t advise you ’bout the very code, but there are people out there who could give you some brilliant ideas.
Thanks. I’m happy you find the scripts here useful. I’m trying deliver code that I would use, so it means a lot. I’ll give it a try with mooforum and the moo google group. I might look almost silly I haven’t done that already.
Yeah, a little
Another bug (?) :
According to your description…
“showDelay: tooltips can be delayed on showing. Basically, this will prevent the tooltips to display if the user passes the cursor over to get to another element, without the intention to hover the element having the tooltip.”
…You made that perfectly clear, especially the “Basically, this will prevent the tooltips to display” part. Just to clarify – I undestand that I need to mouseover the tipper for a given amount of time to display the tooltip, right?
The thing is that it doesn’t work this way and even if you accidentally hover an element for 1ms while pointing towards another, tolltip will be displayed anyway, just a lil’ bit later = showDelay.
So it doesn’t prevent it from opening. It delays the unstoppable opening
Check out your own demo to see the problem.
I see. It happens only for sticky tooltips. I’ll revise the code and make the changes. Thanks for the heads up.
Later edit
It’s solved now. Updated the download files also.
I think it would be useful to add onclick support (probably firing a sticky tooltip by default if not set otherwise) – I am thinking of features like “click here to see instructions”, “how to do it”, “what it is?”, “details”, etc.
That’s a good idea. I’ll make an update by the end of the week with both the repositioning if the tooltip gets outside the visible area and the click event. Thanks for this suggestion.
[...] MooTooltips – JavaScript Tooltip with MooTools. Easily display tooltip messages from HTML elements, Ajax calls or text added manually. [...]
[...] in una nuvoletta da fumetti che si attiverà al passaggio del mouse. Clicca qui per la demo e qui per il [...]
How do I keep it from opening a new window. I have stripped the links of target=”_blank” and it still opens the image in a new window. I am trying to link the thumbnail to a placeholding image.
Thanks.
Chad.
The script functionality is to display the tooltip. Preventing the click event is not something that needs to be implemented with this script.
Anyway, to prevent the click you should do a little script something like:
$(‘my_links_container’).getElements(‘.myLinksCssClass’).each(function(el,i){
el.addEvent(‘click’, function(event){
event.preventDefault(); // this stops the click
// …. here you insert the code for the click event if any
})
})
Maybe a stupid question, but I need the tooltip to follow my cursor rather than show up in a fixed possition. How to do that?
It’s not a stupid question. That behavior is not implemented in MooTooltips. Sorry.
ok then, any tips on how I could implement it myself?
Hi,
like Miez, I would like a position from the cursor. I used a map area, and the tooltip appears on the top of the image, not in the area.
Have you some ways how to change that.
The best will be : tooltip appears when the cursor not move in the link (area for me). I’m not very interested by the tooltip following the cursor.
Thanks in advance
@Mathieu45
No solution for image map yet.
@Miez
You can see an implementation with cursor position here. Unfortunately, the code is written for MooTools 1.1. Hope you can make something up.
Hi Constantin,
I’m trying to change the code, and I found that event.page.x and event.page.y can be used. So I changed like that :
/*
if( elProperties.position == -1 )
this.fromTop = elSize.top – this.options.fromTop – tipSize.height;
else
this.fromTop = elSize.top + this.options.fromTop + elSize.height;
*/
by :
if( elProperties.position == -1 )
this.fromTop = event.page.y – 5 – this.options.fromTop – tipSize.height;
else
this.fromTop = event.page.y – 5 + this.options.fromTop + elSize.height;
and
/*
tip.setStyles({
‘top’: top_dist,
‘left’: elSize.left + this.options.fromLeft,
‘z-index’:'110000′
});
*/
by :
tip.setStyles({
‘top’: top_dist,
‘left’: event.page.x – 52,
‘z-index’:'110000′
});
Note : 52 is just for try
I think it’s a good way, but I’m not satisfied, because the coordinates is when mouse entering in element and not where is the mouse is.
Have you a solution to have the event, when the mouse don’t move during a delay ?
May be mootools have that ?
Hello I am wondering if you can help?
I am having a problem with position of the tip. I have downloaded the source files and am playing around with the sticky feature. When I copy and past the sticky sample you have on the demo page and change the position to “1″ so that it displays bellow in I.E. the tip doesn’t align the way you would expect. It aligns text top and when I use an image instead of text it aligns middle. I seems to work the way you would expect in all other browsers.
Any Idea what I am doing wrong because your sample work fine.
@v-soup
Since the sample you downloaded from this blog works, I’m assuming there’s a CSS issue within your styles. Try reviewing the styles, my bet is that your problem relies in there somewhere.
woww I found this script by chance, I love it
I agree with the comments above – this is a great script. I’ve taken the liberty of using it on two pages I’m working on atm, and changed looks and positioning some. It works great.
Although, I have a question – as it is now, it works on :hover – and that is for the most part fine. I wish to use it for a form, however, and display information whenever a user _either_ hover over the field, or when the input field has focus. As for now, the hover-part is of course working just fine – I was wondering if it would be simple to add a “onFocus” event too? Or would that require a complete rewrite?
For the moment, it works only on mouse over. It would probably be a good idea to make it work for other events also. I’ll give a thought, thanks for the suggestion. I was kinda busy these months, but I’ll hopefully release a new version with most of the suggestions above implemented. Sorry for this delay everybody and thank you for all the new ideas.
Hey Mate,
Me again
I’ve just found another really bad bug: when tips are applied to elements within tabs (so popular lately) they cannot be seen under IE6. All other browser work great, naturally. It’s all ok in the first tab – the problem occurs in another and It has something to do with using different overlay (e.g. overlay: hidden). When using overlay: scroll I noticed the tip actually renders but in a wrong position: instead right next to its trigger, somewhere on the left and the more you scroll, the farther it ‘flies’. I guess it miscalculates its position. Any chances of fixing this?
BTW. I am using Creative Pony’s Sliding Tabs port to mootools 1.2 that can be found here: http://ghazalp.co.cc/sliding_tabs/sliding-tabs8.html but using different overlays is common for most tabs. Try placing tips in any other tab than the first one.
Probably yes. It would be really helpful if you could provide an example page for this. Thanks.
Later edit:
On my PC this tab script doesn’t work as expected. I can’t see any text on IE6. I don’t know what’s causing this.
Hmmm. I dunno, it works well for me (if there is a bug I might have fixed it before, but can’t remember). Maybe try these: http://www.shaunfreeman.co.uk/content/MorphTabs – I can see they’re using hidden overflow as well. In case it’s all ok with them (your script works) I’ll send you some example showing my problem within 48hrs. Can’t do it right now as I’m extremely busy + in a hurry.
Leave a comment