Matteo Bicocchi’s Blog

mb.ideas.repository

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>
...

<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 .

Written by Matteo Bicocchi

February 7, 2009 at 2:28 pm

40 Responses

Subscribe to comments with RSS.

  1. 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

  2. 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

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

  4. 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

    • 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

  5. 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

    • 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

  6. 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

  7. Hey MAN!

    Thank you very much, very nice plugin!

    Best Regards
    Elman Vebs aka pompey

    pompey

    February 26, 2009 at 5:02 am

  8. [...] MB Tooltip [...]

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

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

  11. [...] 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 / [...]

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

  13. 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

    • 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

  14. hi Matteo,
    how to disable tooltip, any parameter to tweak, at page startup? thanks.
    # Chan

    Chan

    April 26, 2009 at 3:34 pm

    • 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

      • it works great now. thanks Matteo!

        Chan

        April 27, 2009 at 4:45 am

  15. 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

    • 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

  16. 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

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

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

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

  20. 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

    • 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

  21. [...] 4-jquery (mb)tooltip [...]

  22. MB needs work, the interface is very laggy.

    novatvstdios

    July 7, 2009 at 2:29 am

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

    demo

    September 11, 2009 at 12:56 am

  24. very thankssss!!!

    Sfenksmmy

    September 14, 2009 at 2:00 pm

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

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

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

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

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

  30. very thankssss

    Fatih

    October 31, 2009 at 7:04 am


Leave a Reply