by Jeff Robbins on October 20, 2008 // Short URL

Announcing BeautyTips, a jQuery Tooltip Plugin

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

BeautyTips Example 1

BeautyTips in action on DoItWithDrupal.com

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.

BeautyTips Example 2

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!

Download at jQuery.com

Jeff Robbins

Co-Founder & CEO

Want Jeff Robbins to speak at your event? Contact us with the details and we’ll be in touch soon.

Comments

Aaron Levitz

much impressed!

This is a great contribution. if I could send you a beer, I'd be doin' that now.

Reply

davexoxide

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.

Reply

Anonymous

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.

Reply

John

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.

Reply

Max

Awesome

Looks great! And I can't wait to show my kids what you can do with high-school algebra :).

Reply

Karl Swedberg

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!

Reply

jeff

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.

Reply

Bradley

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.

Reply

Bradley

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

Reply

Anonymous

nice

Nice tool, I will add it to my site.

Thanks so much .

Reply

Søren p

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

Reply

jeff

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!?

Reply

Søren P

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 :)

Reply

tedivm

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;
}
Reply

casper

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'});

Reply

Michel Peters

IE7 and BT

Doesn't work in IE7 with default options? Get an error on line 398

Reply

jeff

ExCanvas

Yes, please read above. You'll need to include ExCanvas in order to get IE compatibility.

Reply

Anonymous

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.

Reply

Chris Slater

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.

Reply

Brennan

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

Reply

jeff

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.

Reply

florin

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.

Reply

florin

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.

Reply

florin

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

Reply

Jason

Genius

Spent an hour trying to debug this and that was my problem. Thank you :)

Reply

jeff

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.

Reply

Zone

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)

Reply

jeff

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?

Reply

hlo

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

Reply

Anonymous

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.

Reply

jeff

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?

Reply

Stefano

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.

Reply

jeff

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.

Reply

Chad

trouble

i keep getting js error

$(this).attr("bt-xTitle", $(this).attr("title")) is undefined

any ideas??

Reply

siemieng

thank's for probably the

thank's for probably the greates jQuery tooltip plugins, it's realy gooood job, thank's one more........

Reply

Van

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.

Reply

Zone

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 :)

Reply

Neikius

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

Reply

Paolo B

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.

Reply

Tim Jowers

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

Reply

Josh

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!

Reply

DIFFERENT Josh ...

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!

Reply

SamTheMan

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

Reply

siemieng

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

Reply

entrypoint.lv

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 Reply

entrypoint.lv

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.

Reply

Sandy

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.

Reply

Sandy

nevermind....

was missing the
$(function(){ /*$call*/ });....noob -_-

Reply

scr@m

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.

Reply

Anonymous

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.

Reply

Howard

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

    }
Reply

zac

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

Reply

nub340

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

Reply

johnnyboy

problem :(

very good job but it doesn't work in IE 8 :(((((

Reply

Anonymous

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 ?

Reply

Richard

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

Reply

Jerry

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.

Reply

Jerry

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.

Reply

Chris

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?

Reply

soup recipes

Good work, it's hot!

Yeah wondering the same thing about canvas, cause it's an amazing tool. Keep up with the good work! Always good food for though to think how to improve an already great plugin! :)

Reply

Anonymous

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?

Reply

jeff

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.

Reply

Anonymous

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.

Reply

Human

Thanks

Take care boy,,,,,,,,,,,,,Thanks for this working............Thanks

Reply

Nazieb

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

Reply

Junior

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?

Reply

Junior

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.

Reply

iwanttobelieve

Bug?

First of all I want to thank you for this awesome script!

I found a bug (actually I don't know if it is). Except positioning the hover tip to the right, I have problem with left, top, and bottom. When you hover the mouse VERY near the edge of an item, e.g.

  • test1
  • , the tooltip got redrawn forever and ever, it just keeps appearing and disappearing.

    I use the latest version.

    Thanks a lot!

    Reply

    Shouvik

    Delay in displaying u bubble

    Hi

    Is there anyway (without using hoverIntent), I can display the bubble with a little delay?

    also, when I am using hoverIntent, cannot I have the close event with a click instead of the default mouseout?

    Many thanks

    Reply

    mike

    FF 3.5 IE 8

    The position of the hover box can get out of allignment with FF 3.5 and IE 8. It was working in previous versions of FF.

    My temporary fix is just making the box not render, as the contents are positioned correctly.

    Reply

    kai feldmaier

    Optimized for IE6 Standalone

    Great work! But since there are different versions of IE6 you will get different results. It may not be enough to include bgiframe. In my case, I used IE6 Standalone and I had to make two important changes in bgiframe.js:
    First I added scrolling="no", so the scrollbars disappear. Then I changed the iframe src from javascript:false to javascript:void. If you leave javascript:false, IE will write "false" in an unformatted style at the back of the iframe, so you have two layers, the "false" and the tooltip container onwards.
    This is the resulting code, I only show the two modified lines:

    src     : 'javascript:void;' and

    html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"scrolling="no"src="'+s.src+'"'+

    I would recommend you to adopt the changes on this page, it could help some developers saving time. Thanks!

    Reply

    kai feldmaier

    # is better than javascript:void(0)

    Have to correct myself, since the solution above works not in all IE6 Standalone Browsers. Use # instead of javascript:void(0).

    src     : '#'

    Reply

    Laura

    Looks cool but not user-friendly yet

    This looks really cool but it's not clear on how to add the tips to anything besides forms. I'm a moderate Drupal user and even after reading all the documentation I still don't understand how to get it to work... I just want the tips to pop up on some image thumbnails, pretty disappointing. :-(

    Reply

    Dirko

    Enable / Disable function?

    I got your well done plugin working as a ajax help-system. It works very fine.
    But how to toggle it's functionality on and off?
    Currently my working code looks like this:

    $(document).ready(function(){
        $('.hashelp').livequery(function(){ // livequery for ajaxed content
            $(this).each(function() { // tweak from http://plugins.jquery.com/node/9225
                $(this).bt({
                    ajaxPath: 'tools/hilfe/hilfe.php',
                    ajaxData: {"thema":$(this).attr('id')},
                    ajaxCache: false,
                    ajaxLoading: 'getting help...'
                });
            });
        });
    });

    What I need is to disable it's functionality by default and enable it when the user cklicks on an Icon. Another Click on the same Icon should disable it again.
    Do you have any Idea that can bring me further?
    Thanks in advance.
    DirkO Reply

    Larry

    Arrows getting cut off when position: top

    Fantastic plugin!

    One problem I'm having:

    If I position the balloon "top" the arrow gets clipped, as if it's being cropped by the edge of the canvas:

    +=================+
    |                 |
    |     balloon     |
    |                 |
    +==\  /===========+

         ^
         |
      clipped

    I tried using a negative "overlap" but the arrow gets clipped the same way, and the whole balloon moves further from the target.

    Any advice would be hugely appreciated.

    Thanks!

    Reply

    Graham

    Popup appears nowhere near the link!

    The code below pops up the bubble nowhere near the clicked link!

    LIBRARIES USED:
    jquery-1.3.2.min.js
    jquery.bgiframe.min.js
    excanvas.compiled.js
    jquery.bt.min.js.

    SCRIPT:
    $(document).ready(function() {
    $('#example2').bt('Contents of the tip is provided in the .bt() call', {trigger: 'click', positions: 'bottom'});
    });

    HTML:
    <DIV class=target id=example2>click

    Reply

    Thierry

    Problems with IE8

    Hi,

    First, fantastic plugin! I am using it for the last 6 months without any problem.

    ... Until now. I just realize it is not displaying the tips under IE8. In fact it is displaying them but without the bubble and background.
    So I did a Google search on that and find out that I needed the right version of excanvas.
    Updated it. Still the same result. I then checked the demo page and realized that I need to use the latest version 0.9.5-rc1 of the BT plugin.
    Updated it and... working!... But well not really. Now the tips that are on the right edge of my main div section are partly hidden and an horizontal scroll bar appear at the bottom of that div section!!
    I went trough all the open bugs (on the jQuery web site) and I cannot find something really similar to that.
    Is it related to that new "offsetParent" option?

    Can anybody help?

    Reply

    Tamer

    problem??

    Hi,
    I am adding image to the DOM dynamicly after insert new image I also starting tooltip
    something like this

    jQuery("#misccontainer img").bt({
    positions: ['bottom','top','left','right'],
    contentSelector: "jQuery('#tooltipPopup')",
    trigger: 'click',
    width: 220,
    centerPointX: .9,
    spikeLength: 65,
    spikeGirth: 40,
    padding: 15,
    cornerRadius: 25,
    fill: '#FFF',
    strokeStyle: '#ABABAB',
    strokeWidth: 1
    });

    but tooltip not shown any idea for this?

    if images not dynamic tooltip shown ok.

    Thanks

    Reply

    ktw

    Overlapping tips

    Hi,

    Nice job. Thanks.

    Any way to detect when two (or more) tips on the screen at the same time overlap? Something where the second tip to be drawn adjusts its position so that it doesn't obscure the first tip?

    Reply

    Tim Lai

    Nice work

    Nice work, but i found a bug.
    If i use it like below

    $('textarea').bt('hello bt',{trigger: ['focus', 'blur']});

    It doesn't work in ie6,7. Any suggestions? Reply

    Vygandas

    Multiple classes?

    I didn't find how to create one default animation style for all, but also to be able to override it for a single class.
    For example I want to specify default style for every tooltip which takes text from "title" and an individual tooltip text for class "help". How to do that?

    Reply