www.webdeveloper.com
Results 1 to 3 of 3

Thread: varying information in a tooltip?

  1. #1
    Join Date
    Jul 2010
    Posts
    28

    varying information in a tooltip?

    Hi,
    Can anyone help me with this tooltip problem. I'm trying to use the same tooltip but to vary the text that apears inside the tooltip according to what you hover over. I thought I could just have a list of paragraph elements in the html with different ids which I could call when needed. My javascript is :

    function toolpoint_2(f)
    {
    var myNumber2 = document.getElementById(f.id.replace(/thumb_/,"tool"));
    tooltip.show(myNumber2, 200);
    }

    So when you hover over a thumbnail with an id 'thumb_2_2', it gets changed to tool2_2, which is the name of the corresponding paragraph element :

    <p id="tool2_2" style="display: none;">
    testing number 2 thumbnail
    </p>

    But I guess it's not that simple because all that happens is the text in the tooltip reads :
    [objectHTMLParagraphElement]

    Very grateful for any help.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    Maybe use sometghing like this as a guide:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >

    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>

    <
    script  type="text/javascript">
    <!--

    //set up the tool tip for each div
    var toolTips = new Array();
    toolTips['div1'] = 'Tooltip for div 1';
    toolTips['div2'] = 'Tooltip for div 2';
    toolTips['div3'] = 'Tooltip for div 3';

    function 
    showTooltip(elem) {
        
    document.getElementById("tooltip").innerHTML toolTips[elem.id];
                 
    elem.onmouseout=function() {
            
    document.getElementById("tooltip").innerHTML '';
        }
    }

    //-------------------------------------------------------

    //-->
    </script>
    </head>
    <body>

    <div style="margin-bottom: 80px" id="div1" onmouseover="showTooltip(this);">
        This is div 1 
    </div>

    <div  style="margin-bottom: 80px"  id="div2" onmouseover="showTooltip(this);">
        This is div 2 
    </div>

    <div  style="margin-bottom: 80px" id="div3" onmouseover="showTooltip(this);">
        This is div 3
    </div>

    <div id="tooltip"></div>

    </body>
    </html> 
    Last edited by tirna; 08-19-2010 at 06:41 AM.

  3. #3
    Join Date
    Jul 2010
    Posts
    28
    Tirna, many thanks for reply. Problem is the actual tooltip code came from a library so I don't really fully understand it. I'm trying to keep things simple by just varying the text inside it, but I can't get it to recognise the variable 'myNumber2' as text from the DOM. It just keeps writing [objectHTMLParagraphElement] inside the tooltip instead of the actual text I want.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles