I found this snipplet online and altered it so I hoped it would work for me:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style type="text/css">
#hint{
cursor:pointer;
}
.tooltip{
margin:8px;
padding:8px;
border:1px solid blue;
background-color:lightblue;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<h1>Testpage</h1>
<label id="username">Username : </label><input type="text" / size="50">
<span id="hint">Tooltip</span>
<script type="text/javascript">
$(document).ready(function() {
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX + 15;
var tooltipY = event.pageY - 20;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
var testext = {
"hint_text": {
"attr1": "String1/1",
"attr2": "String1/2"
},
"username_text": {
"attr1": "String2/1",
"attr2": "String2/2"
}
};
var showTooltip = function(event, id) {
var outputid= id+"_text";
$('div.tooltip').remove();
$('<div class="tooltip">'+testext[$outputid]['attr2']+'</div>')
.appendTo('body');
changeTooltipPosition(event);
};
var hideTooltip = function() {
$('div.tooltip').remove();
};
$("span#hint,label#username'").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
});
</script>
</body>
</html>
I have for example the id "hint" and I want to use the hint_text/attr2 tooltip. So I take the id ( var showTooltip = function(event, id)) and append "_text" to it (var outputid= id+"_text";) and then use that to get the tooltip ($(''+testext[$outputid]['attr2']+'').appendTo('body');).
When I use a static value like testext['hint_text']['attr2'] it works but like this I can't get it done.
Where am I going wrong?
Any ideas?
Thanks in advance.
Hi Please try the following code ....