Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2007
    Posts
    162
    Thanks
    13
    Thanked 0 Times in 0 Posts

    jquery tooltip not working in document.getElementById

    I found a nice tooltip here: http://osvaldas.info/elegant-css-and...obile-friendly

    and I'm applying it to my page here: http://greenthumbweather.com/frost_d...122.88&temp=36

    I got it working fine at the top of my page, but when I tried to use it like this: document.getElementById("graphic").innerHTML = '<abbr title="User Experience" rel="tooltip">UX</abbr>';

    it doesn't seem to work. It's only the non-styled title tag showing now.

    I thought it may be the CSS in the "graphic" div, but still no luck when I removed that styling. Not sure if it's some JS problems or CSS problems at this point.

    You can see that one of the "UX" is working when mouseover and the second "UX" is not.

    Thanks for any help.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You are initializing the tooltip then setting the innerHTML for the graphic div. So when the tooltip is being initialized, the graphic content does not exist yet. The solution is to set the innerHTML first before initializing the tooltip.

  • Users who have thanked glenngv for this post:

    shadkeene (12-30-2013)

  • #3
    Regular Coder
    Join Date
    May 2007
    Posts
    162
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Perfect! A little tricky since I used window.onload for the innerhtml, but just placed it within that section of the code (after innerhtml) and it works.

    Thanks!

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    The tooltip is only initialized when threshold_lows != "". For the weighted_probability > 20 and weighted_probability < 30 if-blocks, the tooltip is not initialized.

    I suggest that you move the tooltip initialization out of the window onload and put the innerHTML lines inside the document ready:

    Code:
    $( function()
    {
    
        //set graphic innerHTML here
    
        //initialize tooltip
        var targets = $( '[rel~=tooltip]' ),
            target  = false,
            tooltip = false,
            title   = false;
        ...
        ...
    });
    Actually, I think you don't need window.onload at all. You can put all the codes inside document ready. Window onload is triggered after all the resources such as images, css, js, etc are completely loaded. Whereas document ready is triggered when all the DOM elements are available (when </body> is rendered). So document ready is triggered first than window onload.


  •  

    Posting Permissions

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