/    Sign up×
Community /Pin to ProfileBookmark

varying information in a tooltip?

Copy linkTweet thisAlerts:
Aug 19.2010

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.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaAug 19.2010 — Maybe use sometghing like this as a guide:

[code=php]
<!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>

[/code]
Copy linkTweet thisAlerts:
@android1authorAug 19.2010 — 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.
×

Success!

Help @android1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...