varying information in a tooltip?

**android1** · 08-19-2010 05:35 AM

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.

**tirna** · 08-19-2010 06:18 AM

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>

**android1** · 08-19-2010 07:13 AM

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: varying information in a tooltip?

Thread Tools

Display

varying information in a tooltip?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions