Re: [jQuery] Plugin Release: Tooltip
Hi Jörn Any guidelines for testing or finding circular references? Drip is probably what you are looking for. http://outofhanwell.com/ieleak/index.php?title=Main_Page Regards Roger Ineichen _ Projekt01 GmbH www.projekt01.ch ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
From: Michael Geary
(function($) {
// plugin code here
})(jQuery);
From: Sam Collett
I've seen that used before, but can it have memory leak
or other issues?
Sorry about the very slow reply, Sam.
That's a good point. The use of the closure could result in memory leaks
depending on what the rest of the code does. They should be fixable -
closures in and of themselves don't cause leaks, but they can result in
circular references to DOM objects in IE. It would be good to test this and
make sure it doesn't cause a leak.
Does it work on all modern browsers (and not so
modern - IE 5), included those on PDA's etc (not
that jQuery supports portable devices).
Yes, closures are standard JavaScript and work in every version of
JavaScript since 1.1 or 1.2, I forget which.
What happens if 'jQuery' is undefined?
Then you'll get an error when it tries to call the closure function with the
jQuery argument. Of course, the same thing would occur if you coded a plugin
the traditional way:
jQuery.fn.foobar = function() {};
-Mike
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
Michael Geary schrieb: I've seen that used before, but can it have memory leak or other issues? Sorry about the very slow reply, Sam. That's a good point. The use of the closure could result in memory leaks depending on what the rest of the code does. They should be fixable - closures in and of themselves don't cause leaks, but they can result in circular references to DOM objects in IE. It would be good to test this and make sure it doesn't cause a leak. Any guidelines for testing or finding circular references? -- Jörn Zaefferer http://bassistance.de ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
Hi Klaus! Now you could basically bind the tooltip showing to whatever event you can think of. Dunno what else then mouseover and click make any sense... The focus event! Finally a tooltip solution that would be device independent! Yeah! You should make focus the default! Just tried that. It's not that great. One problem, that could be solved: I'm still relying on mouseover and mouseout to save and restore the title attribute. This was necessary to make the click event working. In addition, when displaying the tooltip on focus, nothing happens on mouseover. And the code to compute the position of the tooltip doesn't work when you use the keyboard. That is a little too much to handle it all with one tooltip plugin. -- Jörn Zaefferer http://bassistance.de -- Der GMX SmartSurfer hilft bis zu 70% Ihrer Onlinekosten zu sparen! Ideal für Modem und ISDN: http://www.gmx.net/de/go/smartsurfer ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
Jörn Zaefferer schrieb: Hi Klaus! Now you could basically bind the tooltip showing to whatever event you can think of. Dunno what else then mouseover and click make any sense... The focus event! Finally a tooltip solution that would be device independent! Yeah! You should make focus the default! Just tried that. It's not that great. One problem, that could be solved: I'm still relying on mouseover and mouseout to save and restore the title attribute. This was necessary to make the click event working. In addition, when displaying the tooltip on focus, nothing happens on mouseover. And the code to compute the position of the tooltip doesn't work when you use the keyboard. That is a little too much to handle it all with one tooltip plugin. Maybe I was a little too enthusiastic about it. I thought focus kind of includes hover automagically... Don't care! Great work still! -- Klaus ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
Jörn Zaefferer schrieb: Hi jQueryians! I actually managed to release my first official and documented jQuery plugin, a Tooltip implementation. It doesn't use AJAX, nor extra markup, only title and href attributes and some styles. You can customize the delay after which it should be displayed, default is instant display when hovering something. More details and examples can be found here: http://bassistance.de/index.php/jquery-plugins/jquery-plugin-tooltip/ Comments are welcome! I'll commit the source to the jQuery SVN as soon as it is available again. Hi Jörn, I like it! Using the title attribute instead of XHR degrades much better (uh, it degrades at all). I have done something similiar for Plazes, not very mature, quick and easy. Maybe I'm going to switch, but I'd need a clickable tooltip (appears on click only). Maybe you will add that some time? Is tabs a widget? I'd have to rename it to Tabs() ;-) But I don't like that not-yet convention. Having a little Java background uppercased class names represent a constructor to me... It is also harder to type in. Thank you for sharing! -- Klaus ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
On 06/11/06, Jörn Zaefferer [EMAIL PROTECTED] wrote: Hi jQueryians! I actually managed to release my first official and documented jQuery plugin, a Tooltip implementation. It doesn't use AJAX, nor extra markup, only title and href attributes and some styles. You can customize the delay after which it should be displayed, default is instant display when hovering something. More details and examples can be found here: http://bassistance.de/index.php/jquery-plugins/jquery-plugin-tooltip/ Comments are welcome! I'll commit the source to the jQuery SVN as soon as it is available again. -- Jörn Zaefferer http://bassistance.de A suggestion - perhaps you should use 'jQuery' instead of '$' as isn't that the convention for plugin authoring? ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
Sam Collett schrieb:
On 06/11/06, Jörn Zaefferer [EMAIL PROTECTED] wrote:
Hi jQueryians!
I actually managed to release my first official and documented jQuery
plugin, a Tooltip implementation. It doesn't use AJAX, nor extra markup,
only title and href attributes and some styles. You can customize the delay
after which it should be displayed, default is instant display when hovering
something.
More details and examples can be found here:
http://bassistance.de/index.php/jquery-plugins/jquery-plugin-tooltip/
Comments are welcome!
I'll commit the source to the jQuery SVN as soon as it is available again.
--
Jörn Zaefferer
http://bassistance.de
A suggestion - perhaps you should use 'jQuery' instead of '$' as isn't
that the convention for plugin authoring?
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Jörn took care of that and simulated block scope:
(function($) {
...
})(jQuery);
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
From: Jörn Zaefferer
I actually managed to release my first official and
documented jQuery plugin, a Tooltip implementation. It
doesn't use AJAX, nor extra markup, only title and href
attributes and some styles. You can customize the delay after
which it should be displayed, default is instant display when
hovering something.
More details and examples can be found here:
http://bassistance.de/index.php/jquery-plugins/jquery-plugin-tooltip/
Comments are welcome!
Very nice!
It doesn't behave the same as a standard tooltip, though. Tooltips don't
usually track the mouse - once a tooltip is displayed it doesn't move. It
would be nice to have that option. In fact, instead of the defaults being no
delay and mouse tracking, I'd suggest making the defaults follow the most
common tooltip behavior - a short delay and no mouse tracking.
Whatever you make the defaults, it would be more flexible to change the
delay argument to an args object with properties like delay and track and
whatever else comes up later. Then you could code like this:
$(foo).Tooltip({ delay:250, track:true });
-Mike
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
http://bassistance.de/index.php/jquery-plugins/jquery-plugin-tooltip/
A suggestion - perhaps you should use 'jQuery' instead of '$'
as isn't that the convention for plugin authoring?
The code does use jQuery instead of $. Jörn used the trick I suggested a
while back to get the best of both worlds - convenient coding with $ but not
using the global $. Note the function wrapper:
(function($) {
// plugin code here
})(jQuery);
-Mike
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
A suggestion - perhaps you should use 'jQuery' instead of '$' as isn't
that the convention for plugin authoring?
Jörn took care of that and simulated block scope:
(function($) {
...
})(jQuery);
Aye, another lesson I learned from the great Michael Geary :-)
It allows me to use $ and forces a perfect private scope, with making only the
jQuery method public.
By the way, as nearly no one uses the convention for filenaming
(jquery.xxx.js): I think it's time to simply remove it, any objections?
--
Jörn Zaefferer
http://bassistance.de
--
GMX DSL-Flatrate 0,- Euro* - Überall, wo DSL verfügbar ist!
NEU: Jetzt bis zu 16.000 kBit/s! http://www.gmx.net/de/go/dsl
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
Jörn Zaefferer schrieb:
A suggestion - perhaps you should use 'jQuery' instead of '$' as isn't
that the convention for plugin authoring?
Jörn took care of that and simulated block scope:
(function($) {
...
})(jQuery);
Aye, another lesson I learned from the great Michael Geary :-)
It allows me to use $ and forces a perfect private scope, with making only
the jQuery method public.
By the way, as nearly no one uses the convention for filenaming
(jquery.xxx.js): I think it's time to simply remove it, any objections?
I use it for the plugins I offer at stilbuero.de, but in SVN I didn't
adopt that, because all the other plugins didn't either. I'm still for it!
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
On 06/11/06, Michael Geary [EMAIL PROTECTED] wrote:
http://bassistance.de/index.php/jquery-plugins/jquery-plugin-tooltip/
A suggestion - perhaps you should use 'jQuery' instead of '$'
as isn't that the convention for plugin authoring?
The code does use jQuery instead of $. Jörn used the trick I suggested a
while back to get the best of both worlds - convenient coding with $ but not
using the global $. Note the function wrapper:
(function($) {
// plugin code here
})(jQuery);
-Mike
I've seen that used before, but can it have memory leak or other
issues? Does it work on all modern browsers (and not so modern - IE
5), included those on PDA's etc (not that jQuery supports portable
devices). What happens if 'jQuery' is undefined?
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
On 06/11/06, Jörn Zaefferer [EMAIL PROTECTED] wrote: By the way, as nearly no one uses the convention for filenaming (jquery.xxx.js): I think it's time to simply remove it, any objections? -- Jörn Zaefferer http://bassistance.de -- I do find it helpful as it shows that jQuery is required to use it. Although, the other way is to but it in a jquery\plugins subfolder. I use that convention (but '-' instead of '.'). Saving 7 bytes by removing it won't really make much difference, unless a page has lots of plugins (in that circumstance the page would probably be sluggish on slow computers anyway). ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
I like it! Using the title attribute instead of XHR degrades much better
(uh, it degrades at all). I have done something similiar for Plazes, not
very mature, quick and easy. Maybe I'm going to switch, but I'd need a
clickable tooltip (appears on click only).
Maybe you will add that some time?
Something like this?
$(#container a).addClass(clickable).Tooltip({show: onclick});
Is tabs a widget? I'd have to rename it to Tabs() ;-) But I don't like
that not-yet convention. Having a little Java background uppercased
class names represent a constructor to me... It is also harder to type in.
Stefan uses that in all his Interface stuff. After thinking about it again and
again (with lots of Java-Background), I thought it would be a nice way to show
the difference between simple methods and complex widget methods. Tabs
would be a widget, just like a Thickbox, a sortable table, accordion etc.
--
Jörn Zaefferer
http://bassistance.de
--
GMX DSL-Flatrate 0,- Euro* - Überall, wo DSL verfügbar ist!
NEU: Jetzt bis zu 16.000 kBit/s! http://www.gmx.net/de/go/dsl
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
It doesn't behave the same as a standard tooltip, though. Tooltips don't
usually track the mouse - once a tooltip is displayed it doesn't move. It
would be nice to have that option. In fact, instead of the defaults being
no
delay and mouse tracking, I'd suggest making the defaults follow the most
common tooltip behavior - a short delay and no mouse tracking.
Good suggestion! I'll add that.
Whatever you make the defaults, it would be more flexible to change the
delay argument to an args object with properties like delay and track and
whatever else comes up later. Then you could code like this:
$(foo).Tooltip({ delay:250, track:true });
How about:
$(a).Tooltip({show: 250, track: true});
So show would have either a Number value (delay) or a String like onclick or
click. click would be intersting, then I could implement that like this:
[...]
if(typeof settings.show == String)
this[settings.show](show);
[...]
According to Klaus' request to show the tooltip when the element is clicked.
--
Jörn Zaefferer
http://bassistance.de
--
Der GMX SmartSurfer hilft bis zu 70% Ihrer Onlinekosten zu sparen!
Ideal für Modem und ISDN: http://www.gmx.net/de/go/smartsurfer
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
I get an error in IE6/PC on your demo page. !//-- andy matthews web developer certified advanced coldfusion programmer ICGLink, Inc. [EMAIL PROTECTED] 615.370.1530 x737 --//- -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Jörn Zaefferer Sent: Monday, November 06, 2006 3:20 AM To: discuss@jquery.com Subject: [jQuery] Plugin Release: Tooltip Hi jQueryians! I actually managed to release my first official and documented jQuery plugin, a Tooltip implementation. It doesn't use AJAX, nor extra markup, only title and href attributes and some styles. You can customize the delay after which it should be displayed, default is instant display when hovering something. More details and examples can be found here: http://bassistance.de/index.php/jquery-plugins/jquery-plugin-tooltip/ Comments are welcome! I'll commit the source to the jQuery SVN as soon as it is available again. -- Jörn Zaefferer http://bassistance.de -- Der GMX SmartSurfer hilft bis zu 70% Ihrer Onlinekosten zu sparen! Ideal für Modem und ISDN: http://www.gmx.net/de/go/smartsurfer ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
Excellent work Jörn (yet again), The only suggestion I have deals with displaying the tips close to the right side of the screen. You do an excellent job of handling the width of the tip when it is close to the right edge of the window, but if a word is too long inside of the tip it will push outside of the viewable area and cause the horizontal scroll bar to appear. I would suggest that you attempt to detect that situation and flip the tip so that it shows to the left of the pointer when it is too wide to be completely within the window. @Mike Thanks for bringing up that tip about the function wrapper to localize $ scope. I hadn't seen that before. Very useful. Paul ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
I get an error in IE6/PC on your demo page. I just tested it again but couldn't see any issues. Could give me a hint what exactly is failing? By the way, it's interesting that IE reports src attributes as href attributes... -- Jörn Zaefferer http://bassistance.de -- Der GMX SmartSurfer hilft bis zu 70% Ihrer Onlinekosten zu sparen! Ideal für Modem und ISDN: http://www.gmx.net/de/go/smartsurfer ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
The only suggestion I have deals with displaying the tips close to the right side of the screen. You do an excellent job of handling the width of the tip when it is close to the right edge of the window, but if a word is too long inside of the tip it will push outside of the viewable area and cause the horizontal scroll bar to appear. I would suggest that you attempt to detect that situation and flip the tip so that it shows to the left of the pointer when it is too wide to be completely within the window. That problem occurs most frequently when trying to display long URLs within the tooltip. Your suggestion of flipping the tooltip would be the best solution, but not easy to implement. I should ask Karl Swedberg for his experience on that topic, I think he and Rey already (tried to) solve that for their jTip adoption. -- Jörn Zaefferer http://bassitance.de -- Der GMX SmartSurfer hilft bis zu 70% Ihrer Onlinekosten zu sparen! Ideal für Modem und ISDN: http://www.gmx.net/de/go/smartsurfer ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
I get the error too. Here's a screen shot: Hope this helps. Chris Jrn Zaefferer wrote: I get an error in IE6/PC on your demo page. I just tested it again but couldn't see any issues. Could give me a hint what exactly is failing? By the way, it's interesting that IE reports src attributes as href attributes... -- Jrn Zaefferer http://bassistance.de ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
In IE6/PC I get the following error on load. Line 18 Char 1 Error: Object doesn't support this property or method Code: 0 Just to point out though that the Tooltip works on the previous page for the demo link. !//-- andy matthews web developer certified advanced coldfusion programmer ICGLink, Inc. [EMAIL PROTECTED] 615.370.1530 x737 --//- -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Jörn Zaefferer Sent: Monday, November 06, 2006 8:36 AM To: jQuery Discussion. Subject: Re: [jQuery] Plugin Release: Tooltip I get an error in IE6/PC on your demo page. I just tested it again but couldn't see any issues. Could give me a hint what exactly is failing? By the way, it's interesting that IE reports src attributes as href attributes... -- Jörn Zaefferer http://bassistance.de -- Der GMX SmartSurfer hilft bis zu 70% Ihrer Onlinekosten zu sparen! Ideal für Modem und ISDN: http://www.gmx.net/de/go/smartsurfer ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
I'm getting... $(a, label, input).not(#yahoo).Tooltip is not a function In FF 1.5.0.7/Win, and FF 2.0 Linux. And I get the Object doesn't support this property or method worthless error in IE7. Oh bugger. I just forgot to update the html file, sorry for the confusion. All reported errors should be history now :-) FF, IE and Opera seem to work fine now. -- Jörn Zaefferer http://bassistance.de -- GMX DSL-Flatrate 0,- Euro* - Überall, wo DSL verfügbar ist! NEU: Jetzt bis zu 16.000 kBit/s! http://www.gmx.net/de/go/dsl ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
I just tested the demo page with FF 1.5.0.7 and it works great, but there's an oddity that I wanted to tell you about. Loading the page from scratch and all of the tooltips work as advertised, but when I mouseover the 3rd yahoo link (link to Yahoo2), then click the Tonus image, the tooltip is now empty. I can recreate it every time with those steps. Furthermore, it appears that you can also get the same results with other steps, but the ones I listed will work for you. !//-- andy matthews web developer certified advanced coldfusion programmer ICGLink, Inc. [EMAIL PROTECTED] 615.370.1530 x737 --//- -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Andy Matthews Sent: Monday, November 06, 2006 8:59 AM To: jQuery Discussion. Subject: Re: [jQuery] Plugin Release: Tooltip In IE6/PC I get the following error on load. Line 18 Char 1 Error: Object doesn't support this property or method Code: 0 Just to point out though that the Tooltip works on the previous page for the demo link. !//-- andy matthews web developer certified advanced coldfusion programmer ICGLink, Inc. [EMAIL PROTECTED] 615.370.1530 x737 --//- -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Jörn Zaefferer Sent: Monday, November 06, 2006 8:36 AM To: jQuery Discussion. Subject: Re: [jQuery] Plugin Release: Tooltip I get an error in IE6/PC on your demo page. I just tested it again but couldn't see any issues. Could give me a hint what exactly is failing? By the way, it's interesting that IE reports src attributes as href attributes... -- Jörn Zaefferer http://bassistance.de -- Der GMX SmartSurfer hilft bis zu 70% Ihrer Onlinekosten zu sparen! Ideal für Modem und ISDN: http://www.gmx.net/de/go/smartsurfer ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
Original-Nachricht Datum: Mon, 6 Nov 2006 09:12:06 -0600 Von: Andy Matthews [EMAIL PROTECTED] An: jQuery Discussion. discuss@jquery.com Betreff: Re: [jQuery] Plugin Release: Tooltip I just tested the demo page with FF 1.5.0.7 and it works great, but there's an oddity that I wanted to tell you about. Loading the page from scratch and all of the tooltips work as advertised, but when I mouseover the 3rd yahoo link (link to Yahoo2), then click the Tonus image, the tooltip is now empty. I can recreate it every time with those steps. Furthermore, it appears that you can also get the same results with other steps, but the ones I listed will work for you. Thanks. That is the problem I mentioned, but unfortuanetely, I can't recreate steadily. -- Jörn Zaefferer http://bassistance.de -- GMX DSL-Flatrate 0,- Euro* - Überall, wo DSL verfügbar ist! NEU: Jetzt bis zu 16.000 kBit/s! http://www.gmx.net/de/go/dsl ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
Jörn Zaefferer schrieb:
So show would have either a Number value (delay) or a String like onclick
or click. click would be intersting, then I could implement that like
this:
[...]
if(typeof settings.show == String)
this[settings.show](show);
[...]
Interesting how ideas evolve at the same time... I recently had to do this:
var handler = $.browser.msie ? 'keydown' : 'focus';
$(document)[handler](function(e) {
// handle event
});
That was much shorter than duplicating the code and having a branch like
that:
if () {
$(document).keydown( ... );
} else {
$(document).focus( ... )
}
Yeah, JavaScript rocks! Still learning...
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
Jörn Zaefferer schrieb:
Yeah, JavaScript rocks! Still learning...
Yep. Just after writing the answer to your proposal, I modified it to this:
options = $.extend({
[...]
event: mouseover,
[...]
}, options || {});
[...]
.bind(options.event, bind); // bind is the callback to handle the mouseover
or click or whatever event
Now you could basically bind the tooltip showing to whatever event you can
think of. Dunno what else then mouseover and click make any sense...
The focus event! Finally a tooltip solution that would be device
independent! Yeah!
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
Klaus Hartl schrieb: The focus event! Finally a tooltip solution that would be device independent! Yeah! You should make focus the default! -- Klaus ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
From: Paul McLanahan
The only suggestion I have deals with displaying the tips
close to the right side of the screen. You do an excellent
job of handling the width of the tip when it is close to the
right edge of the window, but if a word is too long inside of
the tip it will push outside of the viewable area and cause
the horizontal scroll bar to appear. I would suggest that
you attempt to detect that situation and flip the tip so that
it shows to the left of the pointer when it is too wide to be
completely within the window.
Great idea, and it's not too hard to do, like on this page for example:
http://denverpost.zvents.com/venues/show/13197
When you hover over any of the map pins, a tooltip-like window appears. If
there isn't room on the right, it goes on the left instead. Similarly, if
there isn't enough room below the pin, the tip moves up. (But I just noticed
a bug - I meant to move the tip so that its bottom lines up with the bottom
of the little box around the pin, like the way the top of the tip lines up
with the top of the box normally - but it's badly misaligned. It works OK in
the horizontal direction.)
All I had to do to make this work was first generate the tip in its normal
bottom-right position and then see if it overflows the visible area of the
window. If it does, then I move it to the left or up. The tip window's
offsetHeight and offsetWidth are available at this point, and the browser
won't actually render the tip window until the JavaScript code stops
executing - so it does no harm to first generate it in one position and then
move it to another.
I use this code to get the viewport (visible rectangle of the window). I
think I saw similar code in one of the jQuery plugins:
viewport: function() {
var e = document.documentElement || {},
b = document.body || {},
w = window;
return {
x: w.pageXOffset || e.scrollLeft || b.scrollLeft || 0,
y: w.pageYOffset || e.scrollTop || b.scrollTop || 0,
cx: min( e.clientWidth, b.clientWidth, w.innerWidth ),
cy: min( e.clientHeight, b.clientHeight, w.innerHeight )
};
function min() {
var v = Infinity;
for( var i = 0; i arguments.length; i++ ) {
var n = arguments[i];
if( n n v ) v = n;
}
return v;
}
}
In the returned viewport, cx and cy are the width and height (old habit of
using Windows naming conventions here!), and x and y are of course the left
and top. Then, after generating the popup window, I compare its offsetLeft,
offsetTop, offsetWidth, and offsetHeight against the viewport and move it as
needed.
-Mike
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin Release: Tooltip
On Nov 6, 2006, at 11:59 AM, Michael Geary wrote:
Great idea, and it's not too hard to do... [see full email below]
Well done, Michael! Wow, I have so much to learn.
On Nov 6, 2006, at 9:51 AM, Jörn Zaefferer wrote:
Your suggestion of flipping the tooltip would be the best solution,
but not easy to implement. I should ask Karl Swedberg for his
experience on that topic, I think he and Rey already (tried to)
solve that for their jTip adoption.
Actually, Cody's jTip had the flipping part in it before I got my
hands on it, so credit go to him. :)
I just added a couple adjustments:
1 If the JTip flips to the left of the element hovered over, and if
the JTip is too wide to fit entirely between the linked item and the
left side of the viewportt, its width decreases to the widest
possible without having any of it cut off.
2. The JTip position moves up if it's initially cut off at the bottom
of the viewable area, and moves down to the top of viewable area if
its height is greater than that of the viewport.
The source file is here:
http://test.learningjquery.com/scripts/jtip.js
My part of the code is a little messy (I'm still learning), but it
might still help you get something done a bit quicker if you decide
to pursue this.
Karl
___
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Nov 6, 2006, at 11:59 AM, Michael Geary wrote:
Great idea, and it's not too hard to do, like on this page for
example:
http://denverpost.zvents.com/venues/show/13197
When you hover over any of the map pins, a tooltip-like window
appears. If
there isn't room on the right, it goes on the left instead.
Similarly, if
there isn't enough room below the pin, the tip moves up. (But I
just noticed
a bug - I meant to move the tip so that its bottom lines up with
the bottom
of the little box around the pin, like the way the top of the tip
lines up
with the top of the box normally - but it's badly misaligned. It
works OK in
the horizontal direction.)
All I had to do to make this work was first generate the tip in its
normal
bottom-right position and then see if it overflows the visible area
of the
window. If it does, then I move it to the left or up. The tip window's
offsetHeight and offsetWidth are available at this point, and the
browser
won't actually render the tip window until the JavaScript code stops
executing - so it does no harm to first generate it in one position
and then
move it to another.
I use this code to get the viewport (visible rectangle of the
window). I
think I saw similar code in one of the jQuery plugins:
viewport: function() {
var e = document.documentElement || {},
b = document.body || {},
w = window;
return {
x: w.pageXOffset || e.scrollLeft || b.scrollLeft || 0,
y: w.pageYOffset || e.scrollTop || b.scrollTop || 0,
cx: min( e.clientWidth, b.clientWidth, w.innerWidth ),
cy: min( e.clientHeight, b.clientHeight, w.innerHeight )
};
function min() {
var v = Infinity;
for( var i = 0; i arguments.length; i++ ) {
var n = arguments[i];
if( n n v ) v = n;
}
return v;
}
}
In the returned viewport, cx and cy are the width and height (old
habit of
using Windows naming conventions here!), and x and y are of course
the left
and top. Then, after generating the popup window, I compare its
offsetLeft,
offsetTop, offsetWidth, and offsetHeight against the viewport and
move it as
needed.
-Mike
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
