Want to get Lullabot article, videocast, and podcast announcements delivered right to your in-box?
Let us know your email address (we won't share it) and we'll let you know when anything exciting happens.
Announcing BeautyTips, a jQuery Tooltip Plugin
October 20, 2008
[update: This is the initial release announcement of BeautyTips. However, there's a newer version that's been released since. To download the latest version of the module, go here.]
[update II: There is now a project page for BeautyTips at jQuery.com. If you have bug reports or support requests please post them to the BeautyTips issue queue. I cannot manage issues through the comments on this post.]
Well I've done it! I've written my first jQuery plugin. The plugin creates rollover balloon-help style tooltips for any element on your page. While there were a few different tool tips plugins that existed for jQuery, none of them seemed to quite meet my need for a NetFlix (or Google Maps) style talk-balloon popup.
It quickly became apparent that in order to accomplish this type of flexible talk-balloon tooltips, I was going to need to engage the use the HTML 5 canvas element (and a lot of high-school algebra and trigonometry). The result is BeautyTips, a flexible and smart tooltip which calculates the best position for each tooltip bubble and then draws it. Bubbles can have rounded corners with a variable corner radius, "spike" length, color, opacity, and much more.
The canvas element is supported in modern versions of Firefox, Safari, and Opera. However, Internet Explorer needs a separate library called ExplorerCanvas included on the page in order to support canvas drawing functions. ExplorerCanvas was created by Google for use with Google Maps and several of their other web apps. Include it on the page according to the readme file and BeautyTips should work just fine in IE.
Beauty Tips was written to be simple to use and pretty. All of its options are documented at the bottom of the jquery.bt.js file and defaults can be overwritten globally for the entire page, or individually on each call.
By default each tooltip will be positioned on the side of the target element which has the most free space. This is affected by the scroll position and size of the current window, so each Beauty Tip is redrawn each time it is displayed. It may appear above an element at the bottom of the page, but when the page is scrolled down (and the element is at the top of the page) it will then appear below it. Additionally, positions can be forced or a preferred order can be defined.
Each tip's position is determined based on its size and the available space around the target.
Visit the DIWD schedule to see how it works.
Usage
The function can be called in a number of ways.
$(selector).bt();
$(selector).bt('Content text');
$(selector).bt('Content text', {option1: value, option2: value});
$(selector).bt({option1: value, option2: value});
Some examples:
$('[title]').bt();
This is probably the simplest example. It will go through the page finding every element which has a title attribute and give it a Beauty Tips popup which gets fired on hover.
$('h2').bt('I am an H2 element!', {
trigger: 'click',
positions: 'top'
});When any H2 element on the page is clicked on, a tip will appear above it.
$('a[href]').bt({
titleSelector: "attr('href')",
fill: 'red',
cssStyles: {color: 'white', fontWeight: 'bold', width: 'auto'},
width: 400,
padding: 10,
cornerRadius: 10,
animate: true,
spikeLength: 15,
spikeGirth: 5,
positions: ['left', 'right', 'bottom'],
});This will find all <a> tags and display a red baloon with bold white text containing the href link. The box will be a variable width up to 400px with rounded corners and will fade in and animate position toward the target object when appearing. The script will try to position the box to the left, then to the right, and finally it will place it on the bottom if it does not fit elsewhere.
$().bt.defaults.fill = 'rgba(102, 102, 255. .8)';
$(selector).bt();All bubbles will be filled with a semi-transparent light-blue background unless otherwise specified.
Live Demo
We've got a good example of BeautyTips in action over on the Do It With Drupal schedule. Resize your window and scroll the page up and down to see how the tips move around to accommodate.
Get it!
There are still a few buggy options such as the animation in IE (it's always IE, isn't it?). And I have yet to figure out how to submit the plugin to jquery.com. But I'm really proud of what I've got so far, so I thought I'd share it here.
A complete list of options are available at the end of file. Enjoy!
Twitter
Mailing list
RSS Feed
Comments
Nice work! Perhaps
Nice work!
Perhaps http://www.nickstakenburg.com/projects/prototip2/ could be ported over from prototype, it has some pretty options :)
Robin
I totally love it!
Needed this a couple of weeks ago. Would have saved me days.
much impressed!
This is a great contribution. if I could send you a beer, I'd be doin' that now.
Nice Work
Very nice work. I'm thinking this would be very cool to incorporate into forms as a new way to emphasize help text. It's much more apparent then small text below input fields.
Food for thought.
Code?
Nice idea, but that code needs some serious love... it repeats itself all over, both on a statement level as well as a block level. Also a bit puzzled as to why you'd put the defaults in jQuery.fn rather than just jQuery.
Finally, the name .bt() seems unnecessarily short and confusing.
Robin, Prototip is licensed
@Robin, Prototip can't be ported, it's against the license. No derivative works are allowed, so you may not alter, transform, or build upon it.
Awesome
Looks great! And I can't wait to show my kids what you can do with high-school algebra :).
Great job!
Hey Jeff,
Great job with the plugin. I haven't looked at the code yet, but the tips themselves are really pretty. My favorite feature is the spikes. Very nice.
I've written a tooltip plugin, too, called clueTip. Lots of options, but no canvas. One nice thing about it is that it can populate the tooltip with contents from a variety of sources -- another file (via ajax), another element on the page, the title attribute of the invoking element, a string, a function, whatever. Please excuse the shameless self-promotion, but I thought you might like to take a look. Feel free to take anything from it that you find useful.
To list your plugin in the jQuery plugin repository, go to http://plugins.jquery.com/ (it uses Drupal) and register. I think it uses the Project module, so it'll probably be pretty familiar to you. But if you run into any problems, let me know and I'll make sure we get you set up.
P.S. Not sure if you remember me, but we met last year at jQuery camp ("JonBob" introduced us). Missed you this year!
Should have looked at the code
Okay, so now I feel kind of silly. If I had looked at the code first, I would have known that you were already aware of my plugin. :)
Hi Karl!
Yes, of course I remember you. I've got your book sitting right here. And clueTip is awesome! I was really inspired by all of the options you added to that plugin and I'm sure that you can see some similarities looking at my code -- and probably some rookie mistakes. :-)
I actually started out thinking that I would just do this as some sort of an add-on to clueTip, but when I started getting all caught up in the canvas stuff, it started seeming too hard to stay in sync with clueTip, so I decided to just let go and basically write the new plugin from scratch.
The ajax stuff is still fun to have and when I can come up with a personal use case for that, I'll probably comb through clueTip and figure out how you're doing that magic!
Likewise, feel free to move any of this code into clueTip if you think it can be done.
And for anyone else that wants to help clean up this code, help make it more efficient, more compatible, or just generally better, I'm open to it. I'll post a link to the jQuery.com project page when I get a chance to create it.
Congrats
Wonderful plugin! I'll definitely be making use of this.
You know you can EASILY
You know you can EASILY create balloons like that with CSS....
Great! But one small thing?
Hi, this is a great tooltip but there's one small problem.
I am forced to develop for IE6 (yes, yes... I know) and the tooltips appear under a select box.
What's the best way to have the tooltip check to see if it covers a select box, and if so, hide that select box until the tooltip is gone?
JS/jQuery is not my strength at all.
Many thanks for your hard work.
use bgiframe plugin
Hi Bradley,
You can use the bgiframe plugin.
The above
Thanks :-)
Thanks Karl
Thanks for that Karl. However, I can't seem to get it working. I'm using bt() like this:
<label for="projectno" class="helpLink" title="Help text for pop up goes here">Project No</label>Then my bt() is set up using livequery like this:
$(document).ready(function () {
$('.helpLink').livequery(
function()
{$(this).bt();}
);
}
I've tried:
$('.helpLink').livequery(function()
{$(this).bgiframe();}
);
and...
$('.bt-wrapper').livequery(function()
{$(this).bgiframe();}
);
and
$('.bt-content').livequery(function()
{$(this).bgiframe();}
);
but none of it works.
As I said I'm new to jQuery and DOM manipulation so I'm having trouble figuring it out.
Can you give me a pointer?
Cheers,
Brad
Well, well,,,well! It's
Well, well,,,well!
It's great!
Really great jQuery
Really great jQuery plugin.
Thanks.
Btw,
maybe you could contribute that module to jquery.com site ?
Why did you not just style
Why did you not just style http://onehackoranother.com/projects/jquery/tipsy/
differently? not to mention it is a bad practice to have style data within your javascript aka the configuration object in your example.
PLUS tipsy is an elegant 57 lines...
nice
Nice tool, I will add it to my site.
Thanks so much .
How to add help text..
Really cool plugin, just what I needed for my little project.
But I can't figure out how to set "help text", I use the script to make tool tips for my input fields and would like to have it say: "please write email", instead of just "email".
my code looks like:
jQuery('input').bt({titleSelector: "attr('name')",
fill: 'white',
cssStyles: {color: 'black', fontWeight: 'bold', width: 'auto'},
width: 400,
padding: 10,
cornerRadius: 5,
animate: true,
spikeLength: 10,
spikeGirth: 15,
positions: ['right', 'left', 'bottom'],
});
and how will I, if my request is possible, set different help text to different names?
Thanks in advance
Well there's yer problem right there! :-)
There are two ways of calling the bt() function,
1) You can send it specific content text, as follows:
$('selector').bt('This is the help text', {fill: 'white'});2) You can have it auto-discover content text. This is usually for grabbing the title text of each of what could be a long list of elements. In this case, you omit the first argument and just send options (or no arguments).
$('a[title]').bt({fill: 'white'});Using method #1 would solve your problem. The other solution to your problem is to add a "title" attribute to your input fields. You should also probably add an id or class to them while you're there so that you can select them more easily. The problem that you're experiencing is that the "name" attribute doesn't understand the space character in its values, so what you are getting is the last "item" after the last space in the name value: the word "email". I'm guessing your form processing script will choke on this too.
If you move your help text into <input title="my help text" ... >, then you could do the following:
$('#myform input[title]').bt({trigger: ['focus', 'blur'], fill: 'white', option2: 'etc'});This would find all of the input elements in your form which posses a title attribute and add the BeautyTips behavior to them showing the help balloon when they get the field gets focus and removing it when the field loses focus. This means the balloon would show up even if the user tabs into the field (without clicking their mouse).
Cool, huh!?
Thanks for that nice walk
Thanks for that nice walk trough Jeff! It really helped me. I think I can figure the rest out now... But it would be nice is the the author had mad and commandlist so that we knew what was able and what wasn't :)
helpful change
I tied your plugin into the form validation function to have the errors show up as tooltips (as opposed to additional labels). I ran into a little bit of trouble when I had to remove the tooltips (once the input field has a valid value).
I added the following to line 138, which essentially just adds a "remove" option. Really simple, obviously, since you've already written the "turn off" code, however this opens that up to the public.
if(opts.remove){
turnOff.apply(this);
return true;
}
re: helpful change
Hi Tedivm, thx for the tip, I tweaked a little
I didn't use 'return true' because of the presence of mulitple images that uses a tooltip so instead i did it like this:
in jquery.bt.js:
if(opts.removeTip == '1')
{
$(this).btOff();
}
else {
if (typeof opts.trigger == 'string') {
opts.trigger = [opts.trigger];
}
if (opts.trigger[0] == 'hoverIntent') {
var hoverOpts = $.extend(opts.hoverIntentOpts, {
over: function() {
this.btOn();
},
out: function() {
this.btOff();
}});
$(this).hoverIntent(hoverOpts);
}
else if (opts.trigger[0] == 'hover') {
$(this).hover(
function() {
this.btOn();
},
function() {
this.btOff();
}
);
}
else if (opts.trigger[0] == 'now') {
// toggle the on/off right now
// note that 'none' gives more control (see below)
if ($(this).hasClass('bt-active')) {
this.btOff();
}
else {
this.btOn();
}
}
else if (opts.trigger[0] == 'none') {
// initialize the tip with no event trigger
// use javascript to turn on/off tip as follows:
// $('#selector').btOn();
// $('#selector').btOff();
}
else if (opts.trigger.length > 1 && opts.trigger[0] != opts.trigger[1]) {
$(this)
.bind(opts.trigger[0], function() {
this.btOn();
})
.bind(opts.trigger[1], function() {
this.btOff();
});
}
else {
// toggle using the same event
$(this).bind(opts.trigger[0], function() {
if ($(this).hasClass('bt-active')) {
this.btOff();
}
else {
this.btOn();
}
});
}
}
add to your defaults in jquery.bt.js :
removeTip: false,
And in your code:
$(img).bt('', {removeTip: '1'});
IE7 and BT
Doesn't work in IE7 with default options? Get an error on line 398
RE: IE7 and BT
IE doesn't support the
canvaselement yet, which is why you're seeing that error.ExCanvas
Yes, please read above. You'll need to include ExCanvas in order to get IE compatibility.
Syntax error
I have tried numerous ways to get your plugin working, including several Drupal plugin handlers, yet I keep getting the error message :
"Parse error: syntax error, unexpected '(', expecting T_VARIABLE or '$' in C:\xampp\htdocs\xampp\d6_pc08\includes\common.inc(1547) : eval()'d code on line 6"
I'm guessing there is something obvious that I am not doing or dumb that I am doing. Nevertheless, I would appreciate a little help.
Troubles getting this going
Hi Jeff (or anyone here who can help),
I've tried all the helpful examples, but I keep getting an error of:
opts.trigger is undefined on line 500
Am I missing something?
Cheers,
Chris.
just thought I would post
just thought I would post that I figured out what my issue was. I was using an older version of jQuery that didn't like BeautyTips.
Nice
Just what I was looking for. Actually, what I really wanted was something like the task bar notifications in Vista, but I was able to accomplish this with the simple addition of a setTimeout() with jQuery's fadeOut().
Something like:
$("#next").bt("Hello World", {positions: "top",
trigger: "now"
});
setTimeout("$('.bt-wrapper').fadeOut(2000)", 2000);
Might be nice to have an option for something like this in the lib (seeing how easy it is to add).
This is great plugin. So I
This is great plugin.
So I wanna use tip from a other tag like , not in title attr, does this supported?
It works with image maps only in Firefox 3
Any clues how to get it work with image maps?
Image Maps!
Wow. Image maps! Old skool!
This isn't really a BeautyTips issue so much as an image maps and jQuery issue. You should be able to use any DOM element as a target. I would test it out by giving each <area> element a CSS id and then try something like this:
$('#area57').bt('Hello from Area 57');I'm guessing that should work. But it's been a long time since I've had occasion to use an image map.
More questions for IE
It looks that collection based filters don't work in IE either. Named #id does.
$('[title]').bt(); does not work!?
$('a').bt(); does not either.
The same page works in FF3.
$('#myid').bt(); does work.
I tried to download Visual Express so that I took a look in IE debuuger. That piece of junk is installing for the past hour so I canceled.
What do you replace the image maps with? It's true I'm on the server side and my first image map was in '97.
Thanks.
Unnecessary btx-title added to element
I have a list item innerHTML wrapped in a SPAN tag.
The UL has four LI.
The SPAN tag of the fist LI gets a btx-title attribute added resulting in overlapped tooltips.
FF3.
It's the animate option that messes with IE7
When the animate option is removed, the IE7 displays the tooltip fine.
The problem with the AREA / MAP remains as well as the duplicate tooltip for the
<li><span>text</span></li>.Genius
Spent an hour trying to debug this and that was my problem. Thank you :)
Do NOT Use Animate!
Yes, the animation stuff is very broken in IE. I was experimenting with it and left it in because I would like to have some animation stuff down the road. For the time being though, do NOT use it on anything that's actually going out to the public.
Absolute positioned DIV-s probelm in IE7
Your plugin is great. I try to use it in my calendar project. There are normal, and absolute positioned DIVs for the daily events. Everything is working fine in FF of course :) But in IE7 not. The "balloons" appearing correctly on the normal positioned DIVs, but on the absolute positioned DIVs not. There is no balloons at all.
What could be the problem? Do you have any suggestion.
Finally a tip for everyone. I have changed this line:
//content = eval('$(this).' + opts.titleSelector);
to this one:
content = eval(opts.titleSelector);
In this case you can refer by ID to any of the HTML elements on the site. For example another DIV. The DIV content will be displayed in the balloon. (not the title of the element)
Ha!
I'm glad others are thinking the same thing I am. I had already changed the eval() line exactly as you did. I have a new version of the plug-in with MANY changes that I will be uploading in the next week or so.
As for the absolutely positioned DIVs in IE, would it be possible for you to put up an example somewhere?
Waiting for the next rel
Hi there Jeff,
OK, I'm waiting for the next release :)
I try to make you an example page.
div or span with position:absolute shines through
Hi Jeff,
BTW, great tooltip!
I am using bt-0.9.3, excanvas-r3 and jquery-1.3.2. and I may have found another issue related to this thread. In IE (6, 7 and 8), divs or spans with position:absolute shines through when the target of the tooltip is wrapped by another div with position:absolute.
Here is an example:
http://hlo.visitview.com/test-bt.htm
Href #1 on top works fine. For hrefs #2 and #3, the two small grey colored div will shine through (but the green div stays in the background like it should). Interestingly href #4 works fine (it is probably because it is rendered last).
I suspect that it has something to do with excanvas (probably z-index related to the target) because this test works fine in Firefox, Chrome and Safari.
I hope this helps.
Best, Howard
Addressed in jquery "Issues for BeautyTips"
A solution to the above was addressed in jquery's "Issues for BeautyTips".
See: Add Option for 'Append to BODY' element
http://plugins.jquery.com/node/6514
Balloon not fully rendering
First let me just say that I love this plug in. However, I created a small test page to see if I could make this work the way I wanted and everything was perfect except that the back of the balloon didn't render so it appears truncated. The arrow displays as does the nicely curved front of the balloon but not the back. All of the text displays but that's it and the back is perfectly straight. I'm hoping this the result of my being terminally stupid and there's something simple I'm doing wrong. I tested this in IE 7 and FF 3 and both did the same thing. Any help would be appreciated.
Screen shot?
I'm not sure I'm quite understanding what's happening. Can you post a link to a screen shot and also the code you're using to generate the balloon?
Same problem
Hello Jeff,
i have the same problem. Seems that on absolute divs the width is calculated double.
I fixed adding those lines after the "textleft" assignment:
if($.browser.msie) {
textLeft = textLeft - opts.width/2;
$box.css('left', (numb($box.css('left')) - opts.width/2) + 'px');
}
Hope this help syou fix the issue.
Thanks
I'm still looking for some example code with this problem so that I can be sure that it's fixed properly. If anyone can link to an example or post more specifics so that I can replicate the problem, it would be appreciated.
trouble
i keep getting js error
$(this).attr("bt-xTitle", $(this).attr("title")) is undefined
any ideas??
thank's for probably the
thank's for probably the greates jQuery tooltip plugins, it's realy gooood job, thank's one more........
I agree, very good plugin!
After this, i wonder what is next on the plate for JQuery tooltip plugins. The calendar is just great, as everything else! thanks a lot for sharing!
Compatibility Problem
I really like your beautytips and will be using them in my next project. Just one thing - their appears to be a positioning problem when used with jquery.dimensions. Tried to work out the problem, but my high school math was a long time ago.
A bug fixing
Jeff,
I found a small bug.
Symptom: The ballons sometimes stick on the screen and do not want to dissapear.
Here is the bug fix for this (if someone else need it):
Place this line:
$(".bt-wrapper").remove();
After the row immediatelly:
var turnOn = function () {
I could not find a solution for the floating DIV-s problem under IE7... I'm still investigating :)
a bug
I didn't read all the comments, so I might be repeating a known issue. In that case I am sorry to bother you :)
So the bug: I used "overlap: 5," and when you position mouse cursor on the part of the div that overlaps with the baloon stem the baloon starts flickering. Depends on cpu speed(more speed faster flicker). Quite annoying.
So for now I just removed overlap and its ok.
Otherwise - great plugin. My usage case is quite similar to the demo :) Anyway, I was searching for this kind of a plugin for days and I have found yours that does the job really nicely :) I kinda miss the ability to place some input fields in the ballon (google style), but hey, you can't have everything...
Very Nice
Implemented it on my project without much of a problem. Works great. Good Job, the 'now' trigger really sealed the deal for me, I didn't find any other tooltips that offered that.
added support for HTML content in tooltip
Thanks for a great plugin. We wanted to put html content from a hidden div into the displayed tooltip so I made a few changes:
line 104: (fixed typo)
* $().bt.defaults.fill = 'rgba(102, 102, 255, .8)';
line 147: (first and last lines are same. Inserted middle three lines.
content = eval('$(this).' + opts.titleSelector);
if( opts.evalTitle )
{ content = eval( content ); // eval it to get whatever from the page. E.g. HTML markup from some div: $('#toolTipEC').html()
}
if (opts.killTitle) {
line 805: added a comma. Added line 806
postHide: function(){return;}, // function to run after popup is removed
evalTitle: false // false displays string in tip, true evals it and displays the results.
Usage example: cannot get the HTML through but basically do this in a div:
title="$('#toolTipEC').html()"
And make your wonderful HTML in the div id'ed as toolTipEC.
Thanks again!
TimJowers
DIV issue... css eval
By "Cannot get the HTML through" I meant the discussion forum is hiding it when I try to post the example.
Callback
Awesome plugin, I'm a bit of a jQuery noob, and was trying to figure out if there was any sort of a callback function for after the tooltip has been executed, I'm trying to set up a cookie of some sort that will not make the user see the tool tip if it has fired once.
Thanks!
Looks nice, but...
33k? I certainly hope I can find a similar plugin that has a lower weight, as the functionality certainly isn't worth saddling an extra 33k on my page weight, to me. However, this is still a really nice start and I wish you luck in revising it further!
Balloon not fully rendering
I was able to duplicate the problem someone had on Dec 1, 2008.
See these sample links:
http://www.miracsystems.com/Mirac/Beautytipstest1.htm
http://www.miracsystems.com/Mirac/Beautytipstest2.htm
The FIRST link chops off one edge of the tip; the second is fine.
I've isolated the problem to the mere presence of the "dimensions.js" plugin - even if it doesn't get used. The link which does not work has this plugin.
It doesn't matter if you place the link to the top, left, right or bottom. ONE edge always gets cutoff - not necessariy the right edge. All the text shows.
Same problem happens in bot IE and Firefox
How to fix problem in IE6 with bt_tooltip over select box?
At first I want to say that plugin is really great.
I found a problem with select in IE6. This version IE not supporting z-index for select box, so in case when bt_tooltip content should by over select box, in fact select is over the tooltip:/
Has anybody know how to fix this problem for IE6?
In google I found two way. First: set CSS visibility property as hidden when tooltip is active, but we never know when tooltip will cover select box, because content is flexable, so tooltip box size is also flexable. Second: put iframe between select box and tooltip. I wondering how to get real size of tooltip content to set this values as width and height of iframe, because height and width sets on 100% not working. I was traing to put iframe into "" but I had problems with iframe position property set as absolute and with real size of iframe. What to with iframe in case when cornerRadius is diffrent then 0?
Maybe someone solve this problem????
Compatibility problem with jquery.dimensions.js
Hi guys!
I have fixed the compatibility issue with the jquery.dimensions.js plug-in (the ONE edge of the tooltip always gets cutoff).
If you have this problem, you can apply the following to fix it:
1) Add the "btOuterWidth" function to the jquery.bt.js:
/**
* jQuery's dimensions.js overrides the $().btOuterWidth() function
* this is a copy of original jQuery's outerWidth() function to allow the plugin to work when dimensions.js is present
*/
jQuery.fn.btOuterWidth = function(margin) {
function num(elem, prop) {
return elem[0] && parseInt(jQuery.curCSS(elem[0], prop, true), 10) || 0;
};
return this["innerWidth"]()
+ num(this, "borderLeftWidth")
+ num(this, "borderRightWidth")
+ (margin ? num(this, "marginLeft")
+ num(this, "marginRight") : 0);
}; // </ jQuery.fn.btOuterWidth() >
2) In the jquery.bt.js, replace all calls of the "outerWidth" function to the "btOuterWidth" function
Will fix
I've created an issue for this in the issue queue on jQuery.com: http://plugins.jquery.com/node/6402
I'll probably roll this into the next release of the plugin.
Thanks for the fix!
You're welcome
You're welcome. There is a small mistake in the comment, "... jQuery's dimensions.js overrides the $().btOuterWidth() ..." should be read as "... jQuery's dimensions.js overrides the $().outerWidth() ..." of course.
Using absolute positioning of tip causing element --bug solution
When using absolutely position elements that a beautytip will spike to,
change line 248 to ::
var offsetParent = ($(this).css("position")=="absolute")?$('body'):$(this).offsetParent();In IE, this will now append the beautytip to the body tag instead of the whatever IE thinks offsetparent is.
Not absolutely true! :-)
This assumes that all absolutely positioned elements have the body as their offset parent. This isn't always true. Let's create an issue over at http://plugins.jquery.com/project/issues/bt and figure this one out over there.
Continued in the issue queue
Please continue this thread at http://plugins.jquery.com/node/6580
thread continuation
One more thing, your tips are very beautiful. Really, you did a wonderful job.
See you on the jquery node(s)!
need help
Hey Jeff, the examples (index.html) in your download work great. but unfortunately they use a demo.js file. the following code (h2 example on your intro page) displays no popup in either FF3 or IE7
<html>
<head>
<title>Hi</title>
<script src="other_libs/jquery-1.3.min.js" language="javascript" type="text/javascript"></script>
<script src="other_libs/jquery.hoverIntent.minified.js" language="javascript" type="text/javascript"></script>
<script src="other_libs/bgiframe_2.1.1/jquery.bgiframe.min.js" language="javascript" type="text/javascript"></script>
<script src="other_libs/excanvas_0002/excanvas-compressed.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.bt.min.js" language="javascript" type="text/javascript"></script>
<link rel="Stylesheet" href="jquery.bt.css" />
<link rel="Stylesheet" href="demo-ie-fix.css" />
<script language="javascript" type="text/javascript">
$('h2').bt('I am an H2 element!', {
trigger: 'click',
positions: 'top'
});
</script>
</head>
<body>
<br/><br/><br/><br/>
<center><h2>Click Me</h2></center>
</body>
</html>
Please help :) and thanks in advance.
nevermind....
was missing the
$(function(){ /*$call*/ });....noob -_-
Alpha on stroke?
How do you create a transparent stroke? Using the rgba directive a second "halo" transparent stroke appears around the non-transparent stroke.
e.g.
strokeStyle: 'rgba(255,0,0,.8)'
thanks.
Is it possible to adjust the vertical position of the tool tip?
Is it possible to adjust vertical position of the tool tip? Working with the demo and the spike displays in the center of the image I am attaching the code to. I would like to be able to adjust the balloon to appear at the bottom of the image. Any help would be appreciated.
How do I load the tooltip on
How do I load the tooltip on demand?
I have a function that is returning html code from an ajax call, how to show a tooltip with the html when the ajax call is completed?
In my code behind I wire the CallWebService method to the onmouseover event of an image on the page.
Thanks
function CallWebService(myid) {
//alert(acct);
$.ajax({ type: "POST",
url: "DemoWebService.asmx/MyWebMthod",
contentType: "application/json; charset=utf-8",
dataType: "xml",
dataType: "json",
data: "{'context':'" + myid + "'}",
processData: false,
error: function(XMLHttpRequest, textStatus, errorThrown) { ajaxError2(XMLHttpRequest, textStatus, errorThrown); },
success: function(xml) { ajaxFinish2(xml); }
});
function ajaxFinish2(xml) {
// parse the object
alert(xml.d); // This works, shows the html returned.
$(document).ready(function() {
// SHOW HTML in ToolTip
$(imgIdMain).bt(xml.d); // this is not working
});
$(imgIdMain).bt(); // This does not work either
}
Not working in IE
Hi there.. this is great and working good for me in FF. However in IE 7 it is not working at all. I am including the excanvas.js and I think the problem may be because I am hiding the content in the css rather than with javascript like in your example. I did this because all of the divs I was using to populate the tips were appearing on the page until the scripts loaded. I thought I had the solution with display: none, but maybe that is why it doesnt work in IE. Anyone have any ideas for me?
Thanks,
Zac
dynamic ajax caching issue
First I just want to say thanks for the great product - so far it's been great - other than this one issue...
I'm having trouble getting the dynamic Ajax content to work. It appears to be caching the first response and using it for all subsequent tooltip content. When I disable caching, it works fine. When I turn caching back on, it stops working.
I think I traced it down to somewhere around line 211 in btOn(). For some reason the "content" variable is never false after the first time, and it always contains the content from the first Ajax response. Also, I noticed the "url" variable doesn't appear to be scoped correctly in the // Ajax(ish) stuff section.
I'm new to this so it's very possible I'm just doing something wrong in my initial wire-up - here's a snippet:
$('.my2cents a').bt({trigger: ['mouseover','mouseout'], ajaxPath: ["$(this).attr('href')"]});Any help is appreciated.
Thanks,
-Nick
problem :(
very good job but it doesn't work in IE 8 :(((((
X position fixed, Y relative ?
Hi folks..
I need to place the bt relative to component at y-axis but need the x-axis position steady at one line, right of the component :-) Any good solution ?
The components differ in size, and will have to.
Can I have a fixed x-position any how ?
Issue queue
Please post support requests to the issue queue.
dynamic ajax caching issue
I think you've done a great job here.....
I also experienced the ajax caching problem.... as soon as you turn caching off things start working again. Do you know when you'll be able to provide a fix for this?
Thanks
- Richard
terrible javascript...
terrible javascript...
No fill in IE 7, fine in firefox 3
Great stuff, although I'm not sure what's going wrong, but I can't get the tip body to fill under IE, remains transparent...
Latest compiled version of excanvas
I believe the problem is with the latest compiled version of excanvas... it was not handling the object as expected... an older version should work however.
Later version of IE
It does seem to be an issue with the newer IE (or at least the IE that comes with Windows 7 beta)... where the background color and frame of the tip is not displayed, but is transparent. I have found some other tip plugins that seem to work under the newer IE releases, although I prefer the usage methods of beautytips.
Canvas gradients
Wow, really like it. Seems to be the best tooltip plugin for jQuery in my opinion.
Will there be a release that uses canvas gradients?
I just tried installing this
I just tried installing this plug multiple times and couldn't get it to work. I followed the directions closely and I gave up and went with cluetips...
OMG, i wish i found that before i spent a minute on this. I was able to get it up and running in less time download this...
Why not make it easy to implement?
Odd
This is the first time that I've gotten feedback like this.
You should definitely check out the demo page to see lots of examples showing exactly how to configure the plugin.
If you're happier with ClueTips, that's great. I do believe that ClueTips is easier to set up. I had used it and while I found it to be easy to implement, it wasn't as configurable, or as pretty as I'd like. So I wrote BeautyTips. I put it out for free and I continue to develop and support this plugin. Sorry if you feel like I wasted your time by doing this.
WOW, Let me say that I'm
WOW, Let me say that I'm VERY sorry and regret posting that. after I read your comments, it made me revisit the plug-in and find out exactly what the problem was. Of course it works on the first try!
I was under a lot of pressure last night, but there's no excuse for being so negative at someones hard work, especially if its a high quality plugin like this.
Thank you for showing me the error of my ways and being respectful about it.
Thanks
Take care boy,,,,,,,,,,,,,Thanks for this working............Thanks
Complete Doc
Hello,
Thanks for creating this plugin. That's a great job.
But where could I get a more complete documentation about the settings? Especially about the value of trigger option.
Thanks
Nice... but...
...doesn't work with jQuery.noConflict();
Latest version should
The latest version should work with .noConflict(). If you are finding that it still doesn't, please post an bug report in the issue queue:
http://plugins.jquery.com/project/issues/bt
Does not work for me in IE6
I implemented the tips and they are not working for me in IE6, I included the
IE scripts as well and they don't work still, anyone having this issue as well?
addition to above
<!--scripts for the new tooltip to function correctly in IE6 --><!--[if IE]><script src="/jscript/jquery/excanvas-compressed.js" type="text/javascript" charset="utf-8"></script><![endif]-->
<!--[if IE]><script src="/jscript/jquery/jquery.bgiframe.min.js" type="text/javascript" charset="utf-8"></script><![endif]-->
I included the IE scripts as specified but it does not work still. Can anyone help?
I am calling like this..
$('#test2').bt({width: '300px', ajaxPath: 'separate-content.xml div#someExternalText'});help please.
Post new comment