jQuery (mb)Tooltip 1.6! a beautiful alternative
Nice tooltip for yor page!
Now you can replace the ugly default tooltip with this smart and nice one!
http://www.open-lab.com/mb.ideas/index.html#mbTooltip
download page:
http://mbideasproject.googlecode.com/files/jquery.mbTooltip.1.6.zip
jQuery project page:
http://plugins.jquery.com/project/mbTooltip
Releases:
1.6
Major bugfix:
- had problem with “select” elements. fixed
1.1.0
Major bugfix:
- shadowTop and shadowLeft now works
- disable and enable mbTooltip now work in all browsers
1.0.0 first release
dependencies:
jquery.timers.js
jquery.dropshadow.js
How does it work:
here is the js call:
$(function(){
$("[title]").mbTooltip({
opacity : .90, //opacity
wait:500, //before show
ancor:"mouse", //"parent"
cssClass:"default", // default = default
timePerWord:70, //time to show in milliseconds per word
hasArrow:false,
color:"white",
imgPath:"images/",
shadowColor:"black",
fade:500
});
})
here is the code for the dom elements:
<h2 title="here it is my tooltip!">try to mouseOver each of the text in this page... wait just few seconds... and...</h2>
...
<span title="Lorem ipsum dolor sit amet" style=" background:black;padding:5px; -moz-border-radius:5px">prova tooltip (span)</span>
...
...
How to use it
Sipmply by placing a “title” atribute with your content as value; be careful on using quote or doublequote or tag opening for html! it’s thought as a simple description container .
Hi Matteo,
can’t let the script work well with jQuery.noConflict(); , firebug always tells me that “$ is undefined”.
Simone
09/02/2009 at 7:40 am
Hi, nice work, one of your demo pages is not loading.. javaScirpt Tree demo. browser saying page not found.
Nilesh
10/02/2009 at 3:16 am
[...] Tweets about WordPress Plugin as of February 10, 2009 tjefford: Best tooltip jquery plugin http://pupunzi.wordpress.com/2009/02/07/mbtooltip/ 2009-02-11 05:55:31 · Reply · View 52teas: @365motorwerks I’ve been pretty [...]
Twitter Tweets about WordPress Plugin as of February 10, 2009 | The Lessnau Lounge
11/02/2009 at 6:11 am
hey, one more note on the Button styles,
FF2 fails to render them correctly,
to fix this issue:
i added: to A tag
display:block; /*opera*/
display:inline-block; /*ie*/
display:-moz-inline-box; /*ff*/
else button width will go out of control in FF2 and maybe other browsers.
Nilesh
12/02/2009 at 11:04 pm
Hi Nilesh,
Thank a lot for your bugfix!
I’m not using FF2 anymore and I couldn’t test it.
Thnx again.
Matteo
Matteo Bicocchi
13/02/2009 at 9:30 am
Hi,
I was looking for a tooltip jquery plugin with an enable/disable capability, and thus was very happy to found your plugin. Anyway, I’ve found two little bugs:
1) Options shadowLeft and shadowTop are not taken into account. You may change the call to dropShadow to $(“#tooltip”).dropShadow({left: this.options.shadowLeft, top: this.options.shadowTop, blur: 3, opacity: 0.4, color:this.options.shadowColor});
2) disableTooltip and enableTooltip won’t work in IE6 (and possibly other browsers), because the tooltipEnable attribute is not a string: change attr(“tooltipEnable”,false) to attr(“tooltipEnable”,”false”) (and same thing for true). Three changes in the code.
Thank you for this plugin.
Medou
20/02/2009 at 1:24 pm
Hi Medou,
Thnx a lot for your contribute!
I’ll incude your suggestions on next release.
Bye,
Matteo
Matteo Bicocchi
20/02/2009 at 1:32 pm
Hi, I just wanted to say that you make some of the most awesome stuff I see over on the jquery plugin page. Thank you for providing these for general consumption.
Scott
21/02/2009 at 11:26 pm
Hey MAN!
Thank you very much, very nice plugin!
Best Regards
Elman Vebs aka pompey
pompey
26/02/2009 at 5:02 am
[...] MB Tooltip [...]
30 Tooltip scripts | Web Tutorials
09/03/2009 at 3:31 pm
[...] (mb)Tooltip is a beautiful tooltip for your webpage in Mootools. Simply by placing a “title” attribute with your content as value, and then you can replace the ugly default tooltip with this smart and nice one. You can also disable and enable (mb)Tooltip at anytime. [...]
Replace Your Default Tooltip with Pretty (mb)Tooltip | Business Marketing Experts
13/03/2009 at 9:20 pm
[...] (mb)Tooltip is a beautiful tooltip for your webpage in jQuery. Simply by placing a “title” attribute with your content as value, and then you can replace the ugly default tooltip with this smart and nice one. You can also disable and enable (mb)Tooltip at anytime. [...]
Replace Your Default Tooltip with Pretty (mb)Tooltip | Feed Reader (Beta)
23/03/2009 at 5:12 am
[...] is install the script and your title tags will instantly get prettier! See Website for more info: (mb)ToolTip April 3rd, 2009 / Digg / Del.icio.us / Stumble / Reddit / [...]
The River Current - (mb)ToolTip - A Pretty Default Title
03/04/2009 at 5:53 pm
[...] here, you might want to subscribe to the RSS feed for updates on this topic.Powered by WP Greet Box(mb)Tooltip is a A jQuery Tooltip Alternative For Your Site, you can use this Free jQuery Tooltip for your [...]
A jQuery Tooltip Alternative For Your Site - (mb)Tooltip | Greepit.com | Open Source Resources for Designers & Developers
13/04/2009 at 11:06 am
Hi,
I use your mbTooltip plugin for a project that I’m developing and I love it. However, I was integrating it with the ui.dialogs plugin, displaying tooltips inside the dialog itself and I found that, since dialog assign their own z-index dynamically, the tooltip will always show in the back. To fix this, I did two things. First, I added a new option in your options object named afterShow, which takes in a function. Then, at end of the buildTooltip function I added:
if(typeof(this.options.afterShow) == “function”)
this.options.afterShow(this, $(“#tooltip”));
This makes it so that if a function is assigned to the option aftershow, it runs it after the tooltip is shown.
Second, on my tooltip declaration, I add the option:
afterShow: function(i, e)
{
var z = i.closest(“.ui-dialog”).css(“z-index”) + 10;
jQuery(e).css(‘z-index’, z);
}
This ensures that the z-index is updated to always be in the front.
I did not know if you were interested in code contributions (I couldn’t find a place to contact you directly), but I figure I post it in case is helps someone.
Please feel free to contact me if you would like to see the actual file modification.
Thank you for a great plugin!
German Kalinec
German Kalinec
24/04/2009 at 6:45 pm
Thnx German.
A more generic way to be shure the tooltip is in front of all the other elements:
jQuery.fn.mb_BringToFront= function(){var zi=10;
$('*').each(function() {
if($(this).css("position")=="absolute"){
var cur = parseInt($(this).css('zIndex'));
zi = cur > zi ? parseInt($(this).css('zIndex')) : zi;
}
});
$(this).css('zIndex',zi+=1);
};
and then add after line 102:
$(".dropShadow").mb_BringToFront();$("#tooltip").mb_BringToFront();
Matteo Bicocchi
24/04/2009 at 9:36 pm
hi Matteo,
how to disable tooltip, any parameter to tweak, at page startup? thanks.
# Chan
Chan
26/04/2009 at 3:34 pm
Hi Chan Su,
to disable tooltip at startup add: $(document).disableTooltip()
just after initializing tooltips.
bye,
Matteo
Matteo Bicocchi
26/04/2009 at 7:16 pm
it works great now. thanks Matteo!
Chan
27/04/2009 at 4:45 am
ciao matteo, utile questo script. ho notato però che con ie, vicino all’angolo rosso in alto a sx c’è una piccola ombra. sai come è possibile rimuoverla?
titti
12/05/2009 at 2:10 pm
Ciao Titti,
hai provato a inizializzarlo senza ombra?… hasShadow:false
oppue a togliere la freccina rossa: hasArrow:false (noi, nelle nostre applicazioni, lo usiamo senza freccina ed il difetto che descrivi non c’è…
ciao,
Matteo
Matteo Bicocchi
12/05/2009 at 5:01 pm
Matteo, I keep getting the following error in Firefox (v3.0.11):
Error: setting a property that has only a getter
Source File: http://localhost/lib/js/mbTooltip.js
Line: 29
Here’s line #29: “fade:200″
In IE8, I get this error:
Message: Not implemented
Line: 16
Char: 7
Code: 0
URI: http://localhost/lib/js/mbTooltip.js
Any ideas? Love your work, by the way!
John Ragland
13/06/2009 at 4:21 pm
[...] 4. jQuery (mb)Tooltip [...]
15 jQuery Plugins To Create An User Friendly Tooltip
22/06/2009 at 6:32 am
[...] 4. jQuery (mb)Tooltip [...]
15个友好的jQuery提示框插件 | 路可-WEB前端开发
23/06/2009 at 2:41 pm
[...] 4. jQuery (mb)Tooltip [...]
15 jQuery Plugins To Create A User Friendly Tooltip
29/06/2009 at 10:52 am
Is there a way to have line breaks in a tooltip? Also, your sample shows use of a “tooltip” attribute whereas the docs say the “title” attribute is used.
Thanks, great work.
ChrisP
03/07/2009 at 11:12 pm
Hi ChrisP,
for the line breaks:
just add a BR tag in your title text.
You are right,
the tooltip attribute was not W3C compliant; you have to add just the title…
I’ll correct the demo.
bye
Matteo
Matteo Bicocchi
03/07/2009 at 11:30 pm
[...] 4-jquery (mb)tooltip [...]
Kullanıcı dostu jquery tooltip eklentisi | pervinin turqa
04/07/2009 at 5:55 pm
MB needs work, the interface is very laggy.
novatvstdios
07/07/2009 at 2:29 am
Hi,
what do you meen by laggy?
Why don’t you be more specific?
bye
Matteo
Matteo Bicocchi
07/07/2009 at 9:45 am
[...] 4. jQuery (mb)Tooltip [...]
15 jQuery Plugins To Create A User Friendly Tooltip | Download E-Books Free Video Training Courses Softwares
29/07/2009 at 12:29 am
[...] 5. (mb)ToolTip : http://pupunzi.wordpress.com/…/mbtooltip/ [...]
Top 10 jQuery Plugins (according to reynoldsftw.com) | Shabbir
01/09/2009 at 10:23 am
Good tooltips, sorry but I must say you have the worst demo page.
demo
11/09/2009 at 12:56 am
very thankssss!!!
Sfenksmmy
14/09/2009 at 2:00 pm
[...] jQuery (mb)Tooltip 1.6 [...]
25 Useful jQuery Tooltip Plugins and Tutorials : Speckyboy Design Magazine
16/09/2009 at 2:41 pm
[...] jQuery (mb)Tooltip 1.6 [...]
25 jQuery Tooltip Plugins and Tutorials | 77even
18/09/2009 at 5:25 am
[...] jQuery (mb)Tooltip 1.6 [...]
25 Useful jQuery Tooltip Plugins and Tutorials — rogdykker
19/09/2009 at 10:55 am
[...] jQuery (mb)Tooltip 1.6 [...]
25 Useful jQuery Tooltip Plugins and Tutorials | Grumpy Git . org | Photoshop
19/09/2009 at 6:36 pm
[...] jQuery (mb)Tooltip 1.6 [...]
25 Useful jQuery Tooltip Plugins and Tutorials | Downrex
24/09/2009 at 12:29 pm
very thankssss
Fatih
31/10/2009 at 7:04 am
Hello Marco,
i have found your script is not working correctly if you quickly change target.
For example: if i have 2 images side by side, both with title attributes and you change quickly from first to second, the second one will not show the tooltip. In this case you must leave and return on it to see the tooltip.
Any suggestion?
Another thing: sometimes the tooltip flickers if it’s positioned too close to the mouse cursor and you go over it
I “fixed it” temporarily just increasing the space between the tooltip and the mouse cursor.
Matias
13/11/2009 at 9:57 am
[...] 32.Container Plus [...]
40 Free Amazing jQuery Plugins and Tutorials With Demos | DesignBeep
21/11/2009 at 3:42 pm
[...] 32.Container Plus [...]
40 Free Amazing jQuery Plugins and Tutorials With Demos | Afif Fattouh - Web Specialist
13/12/2009 at 12:54 pm
[...] 8. (mb)Tooltip [...]
30 Stylish jQuery Tooltip Plugins For Catchy Designs | Afif Fattouh - Web Specialist
25/01/2010 at 7:46 am
Ciao Matteo,
Great stuff!, I love the tooltip but I am having trouble to make it live with the thickbox.
Somehow if your plugin is in place the thickbox doesn’t work at all. Any Idea?
Thanks a lot for the kind attention.
Ivan
Ivanet
09/02/2010 at 6:39 am
Hi Ivanet,
If you debug your page with a developer console (like firebug in firefox or the developer tool in IE8) you can catch exactly what is the error fired by thickbox; that is needed to understand what is incompatible with the two scripts.
Bye,
Matteo
Matteo Bicocchi
09/02/2010 at 6:34 pm
[...] 8. (mb)Tooltip [...]
jQuery插件收藏
13/02/2010 at 9:13 am
[...] (mb)Tooltip 1.6 will take your regular link “title”s and design a nicer looking tooltip from them. [...]
50 jQuery Tools for Awesome Websites Share My Live
10/03/2010 at 6:49 am