Sticky Balloon Tooltips

[littlehotels]

1) Script Title: Rich HTML Balloon Tooltip

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

3) Describe problem: Not so much a problem; more an "if only....".

I have dabbled with all sorts of different scripts for popping up extra informationon a page, and this one comes nearest to the ideal for me. In particular, it is much easier to run other scripts inside it than the alternatives. This is important to me because I want to have links inside my tips that display images with Floatbox.

However, there is one thing that Balloon Tooltip doesn't do, that I would like it to. Instead of closing after a pre-determined time delay, I would like it to be sticky and to have a "close" link within the tooltip content. I have stared helplessly at the code for hours, but my feeble javascript skills won't get me anywhere close to rewriting bits of the code. Has anyone done this already? Or can give me some pointers on where to start?

Thanks in anticipation
Paul

[jscheuer1]

In balloontip.js around line 112, comment out this highlighted line as shown in red:


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

Now you are free to make your own close buttons right in the tip HTML, example:


<!--Sample balloon tooltip-->
<div id="balloon1" class="balloonstyle" style="width: 350px; background-color: lightyellow">
<a href="#" onclick="delayhidemenu(); return false;" title="Close">X</a><br>
Award winning JavaScript tutorials and over 400+ free scripts.
</div>

That's just an example, you may use an image, style it, get as fancy as you like. But you will have to do it for each tip.

One other thing to consider with this is that since delayhidemenu does delay the close a little so that mousing back over the link quickly will stop the tip from disappearing, you may want to set (at the beginning of balloontip.js):


//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=11 //height of arrow image (amount to reveal)

/////No further editting needed

[Nile]

This looks just as easy to put in script inside it, and it sticks:
http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm

[littlehotels]

John, that is brilliant. Thank you. Now I just have to drop the bit of code into all the necessary pages and then I can put it up.

Nile, I did try stickytooltip and several others. I can't remember why I rejected stickytooltip, but none of them quite fitted the bill.

I'm delighted to be able to keep everything I already have, and just make the one little change that I need.

[Nile]

Alright.
It seems your topic is solved... Please set the status to resolved.. To do this:
Go to your first post ->
Edit your first post ->
Click "Go Advanced" ->
Then in the drop down next to the title, select "RESOLVED"