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.
66 comments
HI. Nice code. right now I’m trying to use your code in mapping on the world map image. WHen mouse over the tooltip works but the position is below the image I wanted. What should I do so that the tooltop will be displayed between the mapping i make in the world map. thanks
Set position for the tooltip to -1. Please read the article above. It explains the parameters. If you find trouble understanding something, let me know.
Hey,
Sorry for not sending you the example, I’ll do that, I promise ;] As for now, as I’m working and working, I’ve found yet another issue:
When fromTOP is set to a negative value, eg. -15, the top 15 pixels of the hovered tipper become inactive (they are covered by the transparent bottom of the tip). I think the simplest (maybe not the only) solution is separating the bottom border image from the “balloon pointer” (I have no fuckin’ idea how it’s called, lol), so that thingy can get a low width in another layer and not cover anything on the right of it (just like it would in real world if it existed, haha).
Hope you get my point.
I didn’t describe the bad result effect properly: the pixels are not inactive (they actually do trigger the toolyip when hovered), but they are in conflict with the tooltip bottom layer once it appears, which causes the tooltip to flicker (alternately trying to disappear and to appear). Unfortunatelly, changing mouseover event to mouseenter event in your code doesn’t help..
I’m still hoping for a version of this that triggers not only on :hover but also on :focus and such other niceties, to be used for form fields and such where a user not necessarily uses a mouse
@PoPSiCLe
Sorry for making you wait. I added the focus event, you can check the example and download the new source files. To set the element to trigger on focus, simply set on the element’s rel attribute or by adding extra elements the parameter focus to true ( {…., focus:true} ).
Hi, how to add this script to Joomla 1.5 ?
@Indra
You could create a module for it.
Ok, thanks…
hii,
I was using your tool and i must say it is great. but while customizing it i am having some problem
In the code file index.htm, div extra_tips has 3 types of tool tips when keep “This tip displays content from a hidden div.” link and comment other links the hover is not shown and in while debugging the javascript i have found that it is getting stuck at “this.elements.include($(el.id));
},this);”
can u please help. its urgent
You need to remove the extra tips from the script declaration also. If you declare them and are not in page, you’ll get the error you mentioned since the element can’t be found.
Hi cons, please create this script for mootools 1.11, because joomla 1.5 use mootools 1.11…
MooTools 1.1 version for tooltips is available on youjoomla.com.
For those interested, I added code to this class to make it work with Image Maps.
Basically, you declare id of the target of your image map in the options list.
Then, because mootools getCoordinates() function can only get the coordinates of elements, you define the image as the element, not the map, and then position everything relative to the image.
I don’t have time to post everything right now, if your interest let me know.
Hi, can you show how to use Tooltips with image map? Can’t get it workin’
Thanks
Hi,
i know somebody asked this question early but is there any way to close a sticky tooltip when u click outside of the tooltip?
oh and can i somehow change the script to open the tooltip on click and not only on mouseover?
if anyone found a solution please let me know
I’m using the ajax type call to load the information into a tooltip. That was easy and it’s working the way I need, but I’m also looking for an example that would combine the ajax tooltip with a second request in the tooltip that retrieves remote information only when the tooltip is displayed, and then again each time the tooltip is displayed. (It looks like the current code will load the “ajax” page only once no matter how many times the tooltip pops up.)
For example, in my tooltip there will be an advertisement retrieved from an ad server. I have to retrieve the advertisement only if the user opens the tooltip. And if they open it more than once, I have to retrieve the advertisement again each time. In this way the ad server will count ad impressions properly.
Is there such an example available?
Currently no, but to be able to do what you ask, you need to do a small change to this script. In MooToolTips.js, comment line 120 ( elProperties.set(‘loaded’,1); )
Is it possible to make the tooltip ge left when the hovered link is to far to the right?
I have a problem that the tooltip is half disappearing on the right side of my screen.
or what already would help for me to be able to set the ofzet so thet besides below (1) and on top-(-1) that there is also a option to set left or right.
Greets Dimmy
ps thank you for this nice tooltip
Unfortunately, no. At least for now.
Hello,
I try to use MooTooltips with parameters ajax like ajax.php?t1=1&t2=3 and i don’t find the good way to do that
What good way are you looking for? I don’t really understand. You simply need to add variables to link and inside the page called by tooltip you need to do some processing according to what variables get received. Can you please be a little more specific?
Thanks for the great script. Is there an easy way to change the size (width) of a tool tip without creating new images?
Sorry but no. You’ll have to create new images for it.
are you on Facebook?? if not you should make a page there. will surely become a fan.
keep this great work coming..
this is a very good add-on to mootool’s tooltips. i have been looking a decent script for tooltips, other than the default tooltips.
david walsh made quite a good attempt to customized it.. http://davidwalsh.name/mootools-12-tooltips-customize. but for some reason, it kept on bugging me.. and it doesn’t provide me the functionalities that mootooltips provided. (i really like how it hides and appears + ajax calls)
but, i am curious about one thing, why do you use “rel” attributes.. most of the tags doesn’t support it.. it does work, but it breaks w3c html. just wondering. anyway, i modified the script to work with “title” instead.
ps: i am still learning mootools and generally, javascript.. please be don’t eat me alive.. >.<
David used the default tips plugin from MooTools more. I tried to achieve a bit more with this. About using the rel attribute, I used that to pass some arguments for an element and to customize each element the way you want it. As a note, this was meant for anchors and rel is a valid attribute. Haven’t concerned really about other elements.
ps:
still learning things too, don’t worry
I am trying to build the tips over an imagemap (yes, I know… old school, but that’s what has been requested). I successfully have it working, but is it possible to add the ‘fromTop’ and ‘fromLeft’ parameters to the rel instead of redefining 10 hot-spots in the options area? If the only thing changing is the coordinates, it would be really nice to have those specs inline.
Either way, thanks for a really clean script!
I’m happy you like it. About your problem, can you upload an example somewhere online so I can see better what you’re aiming for? Thanks is advance.
Thanks for the tooltip. It works nice for what we need it but I have a little trouble changing the fromLeft distance on tooltip level though. I have tried with extra and as another parameter in the rel tag, but neither work. Am I missing something? Or is it just not possible?
Hi Vicky,
What you need is currently not possible, sorry for this. But it’s a good idea. I’ll try and see what can be done as soon as I find the time. Thanks for understanding.
Too bad. I am looking forward for the update
.
Thanks for the speedy response.
Leave a comment