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