PDA

View Full Version : Rich HTML Balloon Tooltip -Can tooltip be above the link?



CindyH
09-07-2011, 09:37 PM
1) Script Title: Rich HTML Balloon Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm

3) Describe problem: I have this script working great, except I'd like the tooltip to appear ABOVE the link on hover instead of below. Is there any way around this or do I need a different script?

Thank you.

jscheuer1
09-08-2011, 02:06 AM
In balloontip.js find the following function and add the comment token (red) as shown to the highlighted line:


function clearbrowseredge(obj, whichedge){
if (whichedge=="rightedge"){
edgeoffsetx=0
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffsetx=dropmenuobj.contentmeasure-obj.offsetWidth
if (dropmenuobj.x-edgeoffsetx+dropmenuobj.contentmeasure>windowedge)
edgeoffsetx=dropmenuobj.x-windowedge+dropmenuobj.contentmeasure
return edgeoffsetx
}
else{
edgeoffsety=0
var topedge=ie && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
//if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure) //move up?
edgeoffsety=dropmenuobj.contentmeasure+obj.offsetHeight+(verticaloffset*2)
return edgeoffsety
}
}

CindyH
09-08-2011, 02:54 AM
That worked just like I asked, John, thank you!

However, now it does not go below the link for links that are too high on the page. In other words, the original script showed the tooltip below the link as the default except when links were low on the page, in which case the tooltip showed above the link. I love that the tooltip now shows above, but now I need a workaround for when a link is too high (or the tooltip is too large) to show it above and need it to then drop below.

Have you one more magic trick up your sleeve?

Many thanks!

jscheuer1
09-08-2011, 04:06 AM
OK, instead of commenting out that line, replace it as shown:


function clearbrowseredge(obj, whichedge){
if (whichedge=="rightedge"){
edgeoffsetx=0
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffsetx=dropmenuobj.contentmeasure-obj.offsetWidth
if (dropmenuobj.x-edgeoffsetx+dropmenuobj.contentmeasure>windowedge)
edgeoffsetx=dropmenuobj.x-windowedge+dropmenuobj.contentmeasure
return edgeoffsetx
}
else{
edgeoffsety=0
var topedge=ie && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (dropmenuobj.y - dropmenuobj.contentmeasure - verticaloffset * 2 > topedge) //move up?
edgeoffsety=dropmenuobj.contentmeasure+obj.offsetHeight+(verticaloffset*2)
return edgeoffsety
}
}

CindyH
09-08-2011, 04:23 AM
Many, many thanks! It works like a charm now. Very much appreciated, John, thank you!