javascriptjqueryhtmlarraysjquery-tooltip

Tootip event with JQuery and array with id

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.

Solution

  • Hi Please try the following code ....

    <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) {
if(id!='document'){
  var outputid= this.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>