Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to determine tooltip coordinates?

Reply
Thread Tools

How to determine tooltip coordinates?

 
 
optimistx
Guest
Posts: n/a
 
      12-08-2009
When mousing over an html-element I want to show a tooltip with images. How
to
set the coordinates of the tooltip element so that the tooltip element is
totally visible
in a scrolled window in all commonly used browsers?

A short code example without using any libraries?

 
Reply With Quote
 
 
 
 
Jeremy J Starcher
Guest
Posts: n/a
 
      12-09-2009
On Tue, 08 Dec 2009 10:15:33 +0200, optimistx wrote:

> When mousing over an html-element I want to show a tooltip with images.
> How to
> set the coordinates of the tooltip element so that the tooltip element
> is totally visible
> in a scrolled window in all commonly used browsers?
>
> A short code example without using any libraries?


I just happened to write some tool-tip code recently.

I snagged some code from this group to get the viewport size as well as
the scroll position ... that does the hard part.

So my code looks like this:

(Untested cut and paste from far more complicated production code)

Assumes the popup is called popup.

Been tested on every browser ie6+ vintage and up I can get my hands on.
I don't know of any potential browser trouble.


function popup(event) {
if (!event) event = window.event; // Handle MSHTML


// Display or create your popup here.
var styleRef = windowState.getStyleObj("popup");
var positionMod = windowState.positionMod(styleRef);

var getScrollY = windowState.getScrollY();
var getScrollX = windowState.getScrollX();
var posx;
var posy;

if (event === null) { // Should center the div instead
posx = getScrollX ;
posy = getScrollY;
} else {
posx = getScrollX + event.clientX;
posy = getScrollY + event.clientY;
}

// At this point, my code checks the height and width of the popup to
// make sure it doesn't overlap the screen and moves it left/up as
// needed, then checks to make sure it isn't off the screen in the
// other direction.


styleRef.top=posy+positionMod;
styleRef.left=posx+positionMod;

}



var windowState = (function(){
// http://groups.google.com/group/comp....browse_thread/
thread/53d13bf56552daea/2493378ecfd31f95?q=center+div+on+viewport
+group:*javascript#2493378ecfd31f95

var readScroll = {scrollLeft:0,scrollTop:0};
var readSize = {clientWidth:0,clientHeight:0};
var readScrollX = 'scrollLeft';
var readScrollY = 'scrollTop';
var readWidth = 'clientWidth';
var readHeight = 'clientHeight';
function otherWindowTest(obj){
if((document.compatMode)&&
(document.compatMode == 'CSS1Compat')&&
(document.documentElement)){
return document.documentElement;
}else if(document.body){
return document.body;
}else{
return obj;
}
};
if((typeof this.innerHeight == 'number')&&
(typeof this.innerWidth == 'number')){
readSize = this;
readWidth = 'innerWidth';
readHeight = 'innerHeight';
}else{
readSize = otherWindowTest(readSize);
}
if((typeof this.pageYOffset == 'number')&&
(typeof this.pageXOffset == 'number')){
readScroll = this;
readScrollY = 'pageYOffset';
readScrollX = 'pageXOffset';
}else{
readScroll = otherWindowTest(readScroll);
}
return {
getScrollX:function(){
return (readScroll[readScrollX]||0);
},
getScrollY:function(){
return (readScroll[readScrollY]||0);
},
getWidth:function(){
return (readSize[readWidth]||0);
},
getHeight:function(){
return (readSize[readHeight]||0);
},
getStyleObj:function(id) {
var obj = null;
if(document.getElementById){
obj = document.getElementById(id);
}else if(document.all){
obj = document.all[id];
}else if(document.layers){
obj = document.layers[id];
}
return (obj && obj.style) || obj;
},
positionMod:function(elementStyleRef) {
return (typeof elementStyleRef.top == 'string')?"px":0;
}

};
})();

 
Reply With Quote
 
 
 
 
optimistx
Guest
Posts: n/a
 
      12-11-2009
Jeremy J Starcher wrote:

> I just happened to write some tool-tip code recently.
>
> I snagged some code from this group to get the viewport size as well
> as the scroll position ... that does the hard part.


Thanks a lot! Yes, the hard part is really that. I'll look and modify the
code during the next weeks and might show a link to the results here.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
How could I add a tooltip to an iframe ? Also, the tooltip contents has to be determine @ run-time ! Radu ASP .Net 1 01-08-2007 04:11 PM
show subitem text of listview control in tooltip Lucky ASP .Net 0 12-22-2005 07:04 AM
Tooltip Text Display? Majordomo Firefox 3 11-11-2004 09:45 PM
nuby: determine method passed and determine the receiver that received the method Peņa, Botp Ruby 1 01-24-2004 07:51 PM



Advertisments