280
Search
Related
Related
✎ Pupunzi's newsletter
Subscribing the "Pupunzi newsletter" you'll be staying on top of the most recent Pupunzi's developments. More or less one email per month that informs you about latest updates, works in progress, new releases.
So, keep in touch!
Do you need support?
If you are looking for support on any of my plug-ins you can search for Answers or post your Questions on:
Search for answers or add your issue on GitHub
Related
Join 200 other subscribers
[…] (mb)Tooltip […]
[…] jQuery (mb)Tooltip : Demo […]
[…] 14 – jQuery (mb)Tooltip 1.6 […]
[…] jQuery (mb)Tooltip 1.6 […]
[…] (mb)Tooltip […]
[…] jQuery (mb)Tooltip […]
Thanks a lot, works perfectly.
Hi,
If you initialize the mb.tooltip with the “live” option to true (by default is true) than all the elements in the DOM and all the one inserted somehow later with a “title” attribute will be rendered as tooltip.
Disable the “live” behaviour by adding to the initializer: “live: false” as follow:
[sourcecode language=”javascript” highlight=”2″]
$("#tipped[title]").mbTooltip({
live:false, // < — add this
opacity : .97,
wait:1200,
cssClass:"default",
timePerWord:70,
hasArrow:false,
hasShadow:true,
imgPath:"images/",
anchor:"mouse",
shadowColor:"black",
mb_fade:200
});
[/sourcecode]
Bye,
Matteo
Same problem here, i tried to put the tooltip only on an image $(“img[title]”).mbTooltip(.. , only on specific class $(“.tipped[title]”).mbTooltip(…, only on specific ID $(“#tipped[title]”).mbTooltip(.. but on every call it transforms all title tags into tooltips. Still looking for workaround…
[…] Download Source […]
[…] 7. (mb)Tooltip […]
Hello, I think this tooltip is great, I just have one question. When I set this up I have it initialized for $(‘area.tooltip’) but once the tooltip comes up the first time EVERY title attribute on the entire page comes up in a tooltip. Is there a way to fix this?
[…] 7. (mb)Tooltip […]
[…] jQuery (MB) Tooltip […]
[…] jQuery (MB) Tooltip […]
[…] jQuery (MB) Tooltip […]
[…] jQuery (MB) Tooltip […]
[…] jQuery (MB) Tooltip […]
[…] 9) jQuery mb Tooltip […]
[…] 8. (mb)Tooltip […]
[…] Container Plus […]
[…] 7. (mb)Tooltip […]
[…] (mb)Tooltip […]
[…] (mb)Tooltip […]
[…] * *Orbital Tooltip* * *Simpletip* * *Pop* * *EZPZ Tooltip* * *Prototip* * *qTip* * *Tooltipsy* * *(mb)Tooltip* * *Tipped* * *BeautyTips* * *jQuery Tools Tooltip* * *jTip* * *BsTip* * *Easy Tooltip* * […]
[…] (mb)Tooltip […]
[…] JQUERY (MB)TOOLTIP […]
[…] 25. Replace Your Default Tooltip with Pretty (mb)Tooltip […]
[…] 8. (mb)Tooltip […]
Thank you for your reply Matteo,
I don’t get the error anymore. But I still get the regular tooltip.
I read something on this page about showing the tooltip in front of other elements. You wrote this piece of code:
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);
};
$(“.dropShadow”).mb_BringToFront();
$(“#tooltip”).mb_BringToFront();
Maybe this is what I need to do to get it working. Where do I have to put this code? mbtooltip.js or in my header.php?
Thanks again!!
Rafael
Hi Rafael,
I theink the error is in the first lines of your initialization:
not:
but:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(){
$(“[title]“).mbTooltip({
opacity : .97, //opacity
wait:1200, //before show
cssClass:”default”, // default = default
timePerWord:70, //time to show in milliseconds per word
hasArrow:false, // if you whant a little arrow on the corner
hasShadow:true,
imgPath:”images/”,
ancor:”mouse”, //”parent” you can ancor the tooltip to the mouse position or at the bottom of the element
shadowColor:”black”, //the color of the shadow
mb_fade:200 //the time to fade-in
});
});
});
Bye,
Matteo
Where should I put this code? mbtooltip.js?
Hi Matteo,
I placed the script in my website ( I am using wordpress). At first he gave me an error in FF: $ is not a function. I resolved this, so now I don’t get the error anymore, but it isn’t showing me the tooltip either. Here is my code below (it’s in index.php), hope you could help me out! Thanks in advance.
( function($) {
$(document).ready(function(){
$=(“[title]”).mbTooltip({ // also $([domElement]).mbTooltip >> in this case only children element are involved
opacity : .97, //opacity
wait:1200, //before show
cssClass:”default”, // default = default
timePerWord:70, //time to show in milliseconds per word
hasArrow:false, // if you whant a little arrow on the corner
hasShadow:true,
imgPath:”images/”,
ancor:”mouse”, //”parent” you can ancor the tooltip to the mouse position or at the bottom of the element
shadowColor:”black”, //the color of the shadow
mb_fade:200 //the time to fade-in
});
});
});
*and here the script where I want the tooltip to show:
<div class="post" id="post-” tooltipenable=”true” title=”” >
[…] made tooltip with fade in / out transition effects, transparency and drop shadow effect. 7. (mb)Tooltip Beautifully made tooltip with nice transition for input fields. 8. vTip Simple but well made […]
[…] 8. (mb)Tooltip […]
[…] 9) jQuery mb Tooltip […]
[…] 9) jQuery mb Tooltip […]
[…] (mb)Tooltip jQuery (mb)Tooltip jQuery […]
[…] jQuery (mb)Tooltip […]
[…] jQuery (mb)Tooltip […]
[…] jQuery (mb)Tooltip […]
[…] jQuery (mb)Tooltip […]
[…] jQuery (mb)Tooltip […]
[…] jQuery (mb)Tooltip […]
[…] 8. (mb)Tooltip […]
[…] jQuery (mb)Tooltip […]
[…] jQuery (mb)Tooltip […]
[…] jQuery (mb)Tooltip […]
[…] jQuery (mb) tooltip 1.6 | Demo […]
[…] 7. (mb)Tooltip […]
[…] jQuery (mb)Tooltip 1.6 […]
[…] 8. (mb)Tooltip […]
[…] 8. (mb)Tooltip […]
[…] jQuery (mb) tooltip 1.6 | Demo […]
[…] jQuery (mb)Tooltip 1.6 […]
[…] 8. (mb)Tooltip […]
[…] jQuery (mb)Tooltip 1.6 […]
[…] 8. (mb)Tooltip […]
[…] the browser, similar to the way that OS X’s Growl Framework works.jQuery plugin: TooltipjQuery (mb)Tooltip 1.6Create a Digg-style post sharing tool with jQueryvTipvTip is designed to quickly provide very […]
[…] 8. (mb)Tooltip […]
[…] 8. (mb)Tooltip […]
[…] […]
[…] TipsyCreate a Facebook-like tooltips effect based on an anchor tag’s title attribute.4. MB TooltipYet another alternative to create a simple jQuery tooltip.5. HTML TooltipInline HTML Tooltip lets […]
please download the source code and user it insteed the compiles or (min) version.
Then open the source code.
at the frist line write J = JQuery.noConflict();
then replace all ‘$.’ , ‘($)’ and ‘$(‘ with ‘J.’ , (‘J)’ , and ‘J(‘ respectively.
also do the same in your html files (for Jquery functions only. do not any change other lib functios.).
[…] Web Site Share and Enjoy: […]
This sucks!
Ahh, I only really got into JQ this year so 1.4 is all I know.
Great plugin though, well done.
[…] 8. (mb)Tooltip Beautifully made tooltip with nice transition for input fields. […]
[…] 8. (mb)Tooltip […]
[…] 8. (mb)Tooltip […]
[…] 25. Replace Your Default Tooltip with Pretty (mb)Tooltip […]
[…] 8. (mb)Tooltip […]
Hi Niko,
in jQuery 1.3.x $() was a shortcut for $(document). With jQuery 1.4 this shortcut has been removed. That’s why you find this bug…
I update the downloadable file; thnx
Matteo
I just downloaded this nice JQuery plugin but for some reason it was displaying the tooltip at location 0,0 all the time and the anchor setting was set to “mouse”. I looked in the mbTooltip.js file and the mb_getXY function had:
$().bind(“mousemove”, function(e) { …
I changed it to include the DOM object reference document for JQuery
$(document).bind(“mousemove”, function(e) { …
Not sure why it was missing but it definitely missing in the file now available for download.
[…] 6. (mb)Tooltip […]
very thenks admin 🙂
[…] Container Plus […]
[…] jQuery (mb)Tooltip 1.6! […]
[…] jQuery (mb)Tooltip 1.6! […]
[…] 8. (mb)Tooltip […]
[…] 25. Replace Your Default Tooltip with Pretty (mb)Tooltip […]
Grazie Matteo, ho provato il tuo suggerimento e funziona! grazie mille per il supporto e la velocità 🙂
Ciao Alessandro,
ho notato che se viene attivata la funzione “live” (che permette di inizializzare il tooltip su elementi caricati on the fly sulla pagina, diventa impossibile (allo stato attuale) circoscrivere la funzionalitèà ad elementi specifici del DOM.
Un Workaround può essere di intervenire sul codice :
linea 37:
deve diventare:
linea 38:
deve diventare:
Al più presto pubblicherò il bugfix per gestire questo caso.
Ciao,
Matteo
Ciao, lo script attualmente funziona andando a creare un tootltip ogni qualvolta è presente un riferimento title. Pensate sia possibile fare in modo che lo script funzioni solo se il tag title è presente in un link con una certa classe (ad esempio “info”)? In che modo? Ho fatto delle prove ma senza successo. Grazie mille
Hallo, the script at the moment works creating a tooltip everytime there is a title reference. Do you think could be possibile make work the script only for title inside a certain class link (for example “info”)? In which way? I have tried but unsuccesfully. Thanks a lot!
[…] 8. (mb)Tooltip […]
[…] 9. Replace Your Default Tooltip with Pretty (mb)Tooltip […]
[…] (mb)Tooltip 1.6 will take your regular link “title”s and design a nicer looking tooltip from them. […]
[…] 8. (mb)Tooltip […]
[…] 9. Replace Your Default Tooltip with Pretty (mb)Tooltip […]
[…] (mb)Tooltip 1.6 will take your regular link “title”s and design a nicer looking tooltip from them. […]
[…] 8. (mb)Tooltip […]
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
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
[…] 8. (mb)Tooltip […]
[…] 32.Container Plus […]
[…] 32.Container Plus […]
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.
very thankssss
[…] jQuery (mb)Tooltip 1.6 […]
[…] jQuery (mb)Tooltip 1.6 […]
[…] jQuery (mb)Tooltip 1.6 […]
[…] jQuery (mb)Tooltip 1.6 […]
[…] jQuery (mb)Tooltip 1.6 […]
very thankssss!!!
Good tooltips, sorry but I must say you have the worst demo page.
[…] 5. (mb)ToolTip : http://pupunzi.wordpress.com/…/mbtooltip/ […]
[…] 4. jQuery (mb)Tooltip […]
Hi,
what do you meen by laggy?
Why don’t you be more specific?
bye
Matteo
MB needs work, the interface is very laggy.
[…] 4-jquery (mb)tooltip […]
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
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.
[…] 4. jQuery (mb)Tooltip […]
[…] 4. jQuery (mb)Tooltip […]
[…] 4. jQuery (mb)Tooltip […]
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!
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
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?
it works great now. thanks Matteo!
Hi Chan Su,
to disable tooltip at startup add: $(document).disableTooltip()
just after initializing tooltips.
bye,
Matteo
hi Matteo,
how to disable tooltip, any parameter to tweak, at page startup? thanks.
# Chan
Thnx German.
A more generic way to be shure the tooltip is in front of all the other elements:
2
3
4
5
6
7
8
9
10
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:
2
$("#tooltip").mb_BringToFront();
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
[…] 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 […]
[…] 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 / […]
[…] (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. […]
[…] (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. […]
[…] MB Tooltip […]
Hey MAN!
Thank you very much, very nice plugin!
Best Regards
Elman Vebs aka pompey
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.
Hi Medou,
Thnx a lot for your contribute!
I’ll incude your suggestions on next release.
Bye,
Matteo
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.
Hi Nilesh,
Thank a lot for your bugfix!
I’m not using FF2 anymore and I couldn’t test it.
Thnx again.
Matteo
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.
[…] 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 […]
Hi, nice work, one of your demo pages is not loading.. javaScirpt Tree demo. browser saying page not found.
Hi Matteo,
can’t let the script work well with jQuery.noConflict(); , firebug always tells me that “$ is undefined”.