jQuery (mb)Tooltip 1.6! a beautiful alternative

with 40 comments

mbtooltip

Nice tooltip for yor page!

Now you can replace the ugly default tooltip with this smart and nice one!

demo page:
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> ...<spantitle="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 .

Written by Matteo Bicocchi

February 7, 2009 at 2:28 pm

Posted in code, javascript, jquery

Tagged with jquery, jquery tooltip, mbTooltip

40 Responses

Subscribe to comments with RSS.

Hi Matteo,
can’t let the script work well with jQuery.noConflict(); , firebug always tells me that “$ is undefined”.

Simone

February 9, 2009 at 7:40 am

Reply
Hi, nice work, one of your demo pages is not loading.. javaScirpt Tree demo. browser saying page not found.

Nilesh

February 10, 2009 at 3:16 am

Reply
[...] 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

February 11, 2009 at 6:11 am

Reply
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

February 12, 2009 at 11:04 pm

Reply
- 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
  
  February 13, 2009 at 9:30 am
  
  Reply
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

February 20, 2009 at 1:24 pm

Reply
- Hi Medou,
  Thnx a lot for your contribute!
  I’ll incude your suggestions on next release.
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  February 20, 2009 at 1:32 pm
  
  Reply
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

February 21, 2009 at 11:26 pm

Reply
Hey MAN!

Thank you very much, very nice plugin!

Best Regards
Elman Vebs aka pompey

pompey

February 26, 2009 at 5:02 am

Reply
[...] MB Tooltip [...]

30 Tooltip scripts | Web Tutorials

March 9, 2009 at 3:31 pm

Reply
[...] (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

March 13, 2009 at 9:20 pm

Reply
[...] (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)

March 23, 2009 at 5:12 am

Reply
[...] 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

April 3, 2009 at 5:53 pm

Reply
[...] 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

April 13, 2009 at 11:06 am

Reply
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

April 24, 2009 at 6:45 pm

Reply
- 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
  
  April 24, 2009 at 9:36 pm
  
  Reply
hi Matteo,
how to disable tooltip, any parameter to tweak, at page startup? thanks.
# Chan

Chan

April 26, 2009 at 3:34 pm

Reply
- Hi Chan Su,
  to disable tooltip at startup add: $(document).disableTooltip()
  just after initializing tooltips.
  bye,
  Matteo
  
  Matteo Bicocchi
  
  April 26, 2009 at 7:16 pm
  
  Reply
  - it works great now. thanks Matteo!
    
    Chan
    
    April 27, 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

May 12, 2009 at 2:10 pm

Reply
- 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
  
  May 12, 2009 at 5:01 pm
  
  Reply
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

June 13, 2009 at 4:21 pm

Reply
[...] 4. jQuery (mb)Tooltip [...]

15 jQuery Plugins To Create An User Friendly Tooltip

June 22, 2009 at 6:32 am

Reply
[...] 4. jQuery (mb)Tooltip [...]

15个友好的jQuery提示框插件 | 路可-WEB前端开发

June 23, 2009 at 2:41 pm

Reply
[...] 4. jQuery (mb)Tooltip [...]

15 jQuery Plugins To Create A User Friendly Tooltip

June 29, 2009 at 10:52 am

Reply
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

July 3, 2009 at 11:12 pm

Reply
- 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
  
  July 3, 2009 at 11:30 pm
  
  Reply
[...] 4-jquery (mb)tooltip [...]

Kullanıcı dostu jquery tooltip eklentisi | pervinin turqa

July 4, 2009 at 5:55 pm

Reply
MB needs work, the interface is very laggy.

novatvstdios

July 7, 2009 at 2:29 am

Reply
- Hi,
  what do you meen by laggy?
  Why don’t you be more specific?
  bye
  Matteo
  
  Matteo Bicocchi
  
  July 7, 2009 at 9:45 am
  
  Reply
[...] 4. jQuery (mb)Tooltip [...]

15 jQuery Plugins To Create A User Friendly Tooltip | Download E-Books Free Video Training Courses Softwares

July 29, 2009 at 12:29 am

Reply
[...] 5. (mb)ToolTip : http://pupunzi.wordpress.com/…/mbtooltip/ [...]

Top 10 jQuery Plugins (according to reynoldsftw.com) | Shabbir

September 1, 2009 at 10:23 am

Reply
Good tooltips, sorry but I must say you have the worst demo page.

demo

September 11, 2009 at 12:56 am

Reply
very thankssss!!!

Sfenksmmy

September 14, 2009 at 2:00 pm

Reply
[...] jQuery (mb)Tooltip 1.6 [...]

25 Useful jQuery Tooltip Plugins and Tutorials : Speckyboy Design Magazine

September 16, 2009 at 2:41 pm

Reply
[...] jQuery (mb)Tooltip 1.6 [...]

25 jQuery Tooltip Plugins and Tutorials | 77even

September 18, 2009 at 5:25 am

Reply
[...] jQuery (mb)Tooltip 1.6 [...]

25 Useful jQuery Tooltip Plugins and Tutorials — rogdykker

September 19, 2009 at 10:55 am

Reply
[...] jQuery (mb)Tooltip 1.6 [...]

25 Useful jQuery Tooltip Plugins and Tutorials | Grumpy Git . org | Photoshop

September 19, 2009 at 6:36 pm

Reply
[...] jQuery (mb)Tooltip 1.6 [...]

25 Useful jQuery Tooltip Plugins and Tutorials | Downrex

September 24, 2009 at 12:29 pm

Reply
very thankssss

Fatih

October 31, 2009 at 7:04 am

Reply

Matteo Bicocchi’s Blog