Results 1 to 7 of 7

Thread: Rich HTML Balloon Tooltip - Ajax

  1. #1
    Join Date
    Jun 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Rich HTML Balloon Tooltip - Ajax

    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.

  2. #2
    Join Date
    Jun 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Any ideas would be great.

  3. #3
    Join Date
    Jun 2006
    Posts
    182
    Thanks
    0
    Thanked 14 Times in 14 Posts

    Default

    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("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.

  4. The Following User Says Thank You to DimX For This Useful Post:

    jason1 (06-21-2008)

  5. #4
    Join Date
    Jun 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #5
    Join Date
    Nov 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default plzz need some help

    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

  7. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Please start your own thread Mike when asking a question.
    DD Admin

  8. #7
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •