How to determine tooltip coordinates?

O

optimistx

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

Jeremy J Starcher

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.lang.javascript/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;
}

};
})();
 
O

optimistx

Jeremy said:
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top