Rich HTML Balloon Tooltip (Horizontal Offset?)

[wood]

1) Script Title: Rich HTML Balloon Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...oontooltip.htm

3) Describe problem:

Hey guys. This is my first thread. I just joined. First I would like to that everyone, this is an awesome website and has really helped me out. Great info and tutorials! Love it.

Anyhow. I am using the balloon tooltip: http://www.dynamicdrive.com/dynamici...oontooltip.htm

On thing I would like to do is offset the horizontal from the anchor link. I know that there is a vertical offset variable in the .js but I do not see a horizontal offset. I tried adding a field for it in the .js but it didnt do anything.

Here is my website if it helps solve the issue I am requesting: www.planetinverts.com

Thanks again.

-Ryan

p.s. I also posted this thread in the html general discussion section. Please delete it over there because I think this is the right section to put it in.

[rangana]

Have you tried adding the highlighted in your CSS:

.balloonstyle{
position:absolute;
top: -500px;
left: 0;
padding: 5px;
visibility: hidden;
border:1px solid black;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: white;
width: 200px;
margin-left:-10px;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,Strength=5);
}

[jscheuer1]

That approach seems to work, at least in FF's css editor. But more of a difference would probably be better, and then the arrow should also be moved:

.balloonstyle{
position:absolute;
top: -500px;
left: 0;
padding: 5px;
visibility: hidden;
border:1px solid black;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: white;
width: 200px;
margin-left:100px;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,Strength=5);
}

#arrowhead{
z-index: 99;
position:absolute;
top: -500px;
left: 0;
margin-left:100px;
visibility: hidden;
}

But it would be nicer if the ones on the right could be offset in the opposite direction.

[wood]

thanks a lot guys!

jscheuer1 I tried your code and it works great! Awesome forum. I may get addicted to all the things on the site that I can do to my own...

[wood]

I have another question.

If you look at my website www.planetinverts.com you will see that it has a left column and a right column. When using the bubble it is perfect how the left column bubble goes right directly fitting the column. However, I wish to have the right side column go the other way so that it doesn't go off the right side. I think I probably confused the heck out of anyone who reads this.

Below are illustrations of what I mean:

Perfect Left Side:



Bad Right Side:



How do I move right side to there?

[jscheuer1]

But it would be nicer if the ones on the right could be offset in the opposite direction.

I wish to have the right side column go the other way so that it doesn't go off the right side. I think I probably confused the heck out of anyone who reads this.

Not at all, that's exactly what I was talking about.

I worked out a way to do this in fact. There are probably a number of ways to do it. Here's what I did. For the ones on the right, I changed each of their class names to a compound classname. So for all those on the right side, I changed the class to (addition highlighted):

<div id="acclimateballoon" class="balloonstyle balloonstyle2">
<img src="acclimatemini.jpg" style="float: left; margin-left: 5px; border:0px solid black" /><p align="center"><strong>Acclimating New Shrimp:</strong> </p>Information on how to properly acclimate your newly arrived shrimp to your tank.</div>

I edited the script in a few places to utilize this change, here is the altered script:

//Rich HTML Balloon Tooltip: http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm
//Created: September 10th, 2006

var disappeardelay=0  //tooltip disappear delay (in miliseconds)
var verticaloffset=0 //vertical offset of tooltip from anchor link, if any
var enablearrowhead=1 //0 or 1, to disable or enable the arrow image
var arrowheadimg=["arrowdown.gif", "arrowup.gif"] //path to down and up arrow images
var arrowheadheight=15 //height of arrow image (amount to reveal)

/////No further editting needed

var ie=document.all
var ns6=document.getElementById&&!document.all
verticaloffset=(enablearrowhead)? verticaloffset+arrowheadheight : verticaloffset

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function showhide(obj, e){
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (e.type=="mouseover")
obj.visibility="visible"
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

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
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
}
}

function displayballoontip(obj, e){ //main ballooon tooltip function
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dropmenuobj!="undefined") //hide previous tooltip?
dropmenuobj.style.visibility="hidden"
clearhidemenu()
//obj.onmouseout=delayhidemenu
dropmenuobj=document.getElementById(obj.getAttribute("rel"))
showhide(dropmenuobj.style, e)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")+verticaloffset
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
if (enablearrowhead)
displaytiparrow(dropmenuobj.className.replace(/^balloonstyle /,''))
}

function displaytiparrow(cn){ //function to display optional arrow image associated with tooltip
tiparrow=document.getElementById("arrowhead")
tiparrow.className=cn=='balloonstyle2'? 'arrowhead2' : '';
tiparrow.src=(edgeoffsety!=0)? arrowheadimg[0] : arrowheadimg[1]
var ieshadowwidth=(dropmenuobj.filters && dropmenuobj.filters[0])? dropmenuobj.filters[0].Strength-1 : 0
//modify "left" value depending on whether there's no room on right edge of browser to display it, respectively
tiparrow.style.left=(edgeoffsetx!=0)? parseInt(dropmenuobj.style.left)+dropmenuobj.offsetWidth-tiparrow.offsetWidth-10+"px" : parseInt(dropmenuobj.style.left)+5+"px"
//modify "top" value depending on whether there's no room on right edge of browser to display it, respectively
tiparrow.style.top=(edgeoffsety!=0)? parseInt(dropmenuobj.style.top)+dropmenuobj.offsetHeight-tiparrow.offsetHeight-ieshadowwidth+arrowheadheight+"px" : parseInt(dropmenuobj.style.top)-arrowheadheight+"px"
tiparrow.style.visibility="visible"
}

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'; dropmenuobj.style.left=0; if (enablearrowhead) tiparrow.style.visibility='hidden'",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

function reltoelement(linkobj){ //tests if a link has "rel" defined and it's the ID of an element on page
var relvalue=linkobj.getAttribute("rel")
return (relvalue!=null && relvalue!="" && document.getElementById(relvalue)!=null && /^balloonstyle/.test(document.getElementById(relvalue).className))? true : false
}

function initalizetooltip(){
var all_links=document.getElementsByTagName("a")
if (enablearrowhead){
tiparrow=document.createElement("img")
tiparrow.setAttribute("src", arrowheadimg[0])
tiparrow.setAttribute("id", "arrowhead")
document.body.appendChild(tiparrow)
}
for (var i=0; i<all_links.length; i++){
if (reltoelement(all_links[i])){ //if link has "rel" defined and it's the ID of an element on page
all_links[i].onmouseover=function(e){
var evtobj=window.event? window.event : e
displayballoontip(this, evtobj)
}
all_links[i].onmouseout=delayhidemenu
}
}
}

if (window.addEventListener)
window.addEventListener("load", initalizetooltip, false)
else if (window.attachEvent)
window.attachEvent("onload", initalizetooltip)
else if (document.getElementById)
window.onload=initalizetooltip

Finally, I used these styles:

.balloonstyle {
position:absolute;
top: -500px;
left: 0;
padding: 5px;
visibility: hidden;
border:1px solid black;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: white;
width: 200px;
margin-left:100px;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,Strength=5);
}

.balloonstyle2 {
margin-left:-170px;
}

#arrowhead {
z-index: 99;
position:absolute;
top: -500px;
left: 0;
margin-left:100px;
visibility: hidden;
}

.arrowhead2 {
margin-left:-30px!important;
}

The !important keyword is required for a class to override an id. The exact margin-left values are at your discretion.

[wood]

j- works like a charm!

You are the bomb...

Just to note: you left out of the .js the top line:

var disappeardelay=0 //tooltip disappear delay (in milliseconds)