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.
107 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.
Hi,
i trying to modify the mootools on my website. But if i take off window.addEvent(‘load’, function(){ work with internet explorer but NOT on Firefox. any advice.
I’m trying to call a fucntion with the event: onMouseOver and past a variable. When i rollover the mouse over the word it work great with ie but with firefox work ONLY on the second rollover.
Pls help
Hmm, OK, a little on window events. Remember the good ol’ >body onload=”doSomething”<? This is what window.addEvent does. You need the window event so you can start the scripts when for example everything is loaded on page ( addEvent(‘load’) ) or when dom is ready ( addEvent(‘domready’) ). If you fail to do this and create a class instance in, let’s say, your header, you will get an error because the element you try to apply the script to isn’t yet loaded.
Thanks for you rapidly respond.
Let me explain better: I can’t use the load or domready event on the page. Because the value load using sajax, u know what i mean.
This are the step: When the page load i create 3 dropdown with categories using sajax.
everytime you select any option from any dropdown it refresh the 3 dropdown and give a result.
The result give you products. On each product i have a link (onmuseover=blowtips();) so i call the class. i take off the window.addEvent(‘load’, function(){ and just leave the sintax where you call the class. it work on ie but not on firefox (until you rollover 2 times).
There is a way or solution to make it work on FF ???
I’m still pulling my hair off :(
Ty
BTW, can i use or call the class without using window.addEvent(‘load’, function(){ ???
Is it possible to make the tips appear when a word or image is clicked instead of using hover only? We use MooTooltips on several Web sites and it always works well. But we are now modifying those site for tablet computers where there is no mouse. We hope to be able to make one single change and effect the tips everywhere on the site. Is that possible?
Any answer to this question?
Sorry Robert, missed your comment. Let’s see, you want click instead of mouseover. Here’s a quick fix: open MooTooltips.js and on lines 88 and 89 you will see the events that trigger the tooltip to appear/leave. Change mouseenter to click and let me know if it does the trick. By the way, thank you for using this script. If it’s not much to ask, can you send me some links of the projects you used this on? I plan on doing a section to showcase implementations of the scripts found here and if it’s OK with you and you think you got something worthy to brag with… I’m open to suggestions.
Thanks Constantin,
I made the change and it works now when I click with a regular mouse, but it doesn’t work when I tap on my iPad. Here’s a link to a page where you can see:
http://coffeeandwifi.com/location/Modern-Leaf-Bean-Cafe-10250
There are a couple of small question marks with circles around them. Before your change I would hover the mouse over and the Tooltip would appear. After your change I have to click. But I can’t get Tooltips to appear either way on the iPad.
If you float your mouse over other things on that website you’ll see Mootools slide effects. Those all work on my iPad when I tap on them. Only the Tooltips seem to be a problem right now.
I was actually hoping for a solution where it would still work with the hover on a “real” computer, and click with a tablet or mobile device. My website already has code to identify mobile devices correctly.
I also have Android phones for testing this, and would be happy to install special code to help test this and come up with a solution for no-mouse devices. Contact me by e-mail, or using the Contact Us form on that website to exchange more information.
Great Script.
I was implementing it with sticky option as true. in that case in IE the close button is not working.
Any ideas ?
See Harv’s comment. There’s a detailed explanation how to make this work.
Hi it works perfect but how do i get it to be sticky?
You have the sticky parameter. Set this to true and you’re done.
Hi Constantin,
I’m trying to use your script but I’m facing one problem.
The implementation is ok, but as I wanted to trigger the tooltip on a click event instead of ‘mouseenter’,
I did the modification at line 88 (what you adviced in a previous comment).
I have 4 tooltips on my webpage. So far, 2 of them shows up when I click on the link but the 2 others don’t work. I checked everything, but I put exactly the same thing on those 2. Do you have an idea why ?
Thanks for your help.
Please provide an example. I really can’t say what’s wrong from your description.
Can this be implemented as a plugin for wordpress? If so how would one go about adding it as a plugin? Thanks.
Hi Matt,
Yes, I guess this could be implemented into a wp plugin. But how to do it it’s a long story, you’ll need to know how to write a wp plugin, what options to give to users, things like that. I suggest you start reading the wp codex to start with.
Hi, I have a problem.
I’m trying to put together MootoolTips and imagemap, but it’s no use. Tooltip for the whole image works fine, but I can’t make it work with separate areas. Could you please give a code example for how to use it?
Me be sorry, problem solved, the only one left is inline positioning…
Is there some option to do like this :
rel=”{content:’kiev’,'position’:1,target:’mapimage’,focus:true,fromLeft:’15′}
or some other way position each tooltip without making a separate class every time
I don’t think I really get it. Can you please create a small demo and place it online with some additional explaining on what exactly you’re trying to make?
Hi Constantin,
first of all thanks for your work, this is a good tooltip script which I use often :-)
Currently I try to add a delayed fade out but i do not succeed.
I copied the show function an added the time but it seems to be different to the hide function.
If you would give me a hint how to add it I would appreciate it.
I think the fade out would make this script perfect :-)
Best regards
Samro
Glad to hear you like it. Now, a question: What exactly do you want to accomplish? The tooltip fades in/out on show/hide already. I don’t really understand what you’re trying to do.
Hi Constantin,
thanks your fast reply.
I have build a map with multiple locations which open when you hover them.
What I want to achieve is that the user can click a link inside a tooltip.
So I would like to add a delay when they disappear, similar to the delay when you open them.
Can you give me a hint how I can achieve that?
Best regards
Samro
Now I get it. Well, you could use sticky:true. But if you don’t like that, you could make a small change to the script on line 154 ( this.hide(element); ) and put this instead of what’s already in there:
this.hide.pass(element).delay(5000, this);Thanks man, you made my day! :-)
To be honest I had a similar version, but I was missing the this.
I should improve my JS skills.
Have a good day!
Thank you, I would wish you a good day back but from what I see you already got it :) Later man, take care.
Leave a comment