Rich HTML Balloon Tooltip - Ajax

[jason1]

1) Script Title: Rich HTML Balloon Tooltip

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

3) Describe problem:

Hello,

I am trying to implement this script on a page that uses ajax. I got the script to work on a table for every <tr>. So when a user mouses over a table row, the tooltip appears for that row. The script works fine when the table is hard coded on the page.

But now here's the tricky part. The table needs to be used on a page that uses user input to dynamically update the contents of a div using the innerhtml property of the div. This is done through an ajax call using javascript. The table is returned from the ajax response and placed into the innerhtml property of the div, which is how the page dynamically updates.

The tooltip doesn't work in this context. When I mouse over a table row, the tooltip doesn't appear. I tried placing the balloontip.js inside the div as part of the ajax response but that didn't make it work. It's an excellent script and I hope it can work in this context.

It looks like there's some communication problem between balloontip.js and the table returned from the ajax call, which may be why it's not working.

Can this tooltip work on a table that is returned from an ajax call and if yes, what changes do I need to make to balloontip.js and the other script elements?

Thank you in advance.

[jason1]

Any ideas would be great.

[DimX]

Change the initalizetooltip function in balloontip.js to following:

function initalizetooltip() {
    var all_links = document.getElementsByTagName("a");
    if (enablearrowhead && !document.getElementById("arrowhead")) {
        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]) && all_links[i].onmouseover == null) {
            all_links[i].onmouseover = function (e) {
                var evtobj = window.event ? window.event : e;
                displayballoontip(this, evtobj);
            };
            all_links[i].onmouseout = delayhidemenu;
        }
    }
}

And every time you reload the contents of the table call this function.

[jason1]

Change the initalizetooltip function in balloontip.js to following:

Code:
function initalizetooltip() {
var all_links = document.getElementsByTagName("a");
if (enablearrowhead && !document.getElementById("arrowhead")) {
tiparrow = document.createElement("img");
tiparrow.setAttribute("src", arrowheadimg[0]);
tiparrow.setAttribute("src", jewelry central);
tiparrow.setAttribute("id", "arrowhead");
document.body.appendChild(tiparrow);
}
for (var i = 0; i < all_links.length; i++) {
if (reltoelement(all_links[i]) && all_links[i].onmouseover == null) {
all_links[i].onmouseover = function (e) {
var evtobj = window.event ? window.event : e;
displayballoontip(this, evtobj);
displayballoontip(this, jewelry central);
};
all_links[i].onmouseout = delayhidemenu;
}
}
}And every time you reload the contents of the table call this function.


I will try your advice and report back.
thank you for your help.

[mike_k12003]

I have a div with a scrollbar and links inside it. for links appearing withut scrolling the div the ballontip show fine but as you scroll the div the balloontip goes further and further down, it is as if the javascript calculates the position the link would have if it weren't inside the div, a friend suggested adding the scrollTop property but I am cluless where. I have searching two months for a silution and founded nothing can anyone help?
Many thanks for your time

[ddadmin]

Please start your own thread Mike when asking a question.

[jasarck]

Hi Jason,

Thank you for valuable suggestion .. I have same issue . But it not working in firefox.

Hope this reply after four years. hope you will see it.