on hover showing person info - not working
Hi everybody,
i am new guy to jquery.
i am trying to show on hover of a row, some information in a div tag next to mouse pointer.
here is the code i have written.
-
$('.my-cont table tr').hover(function( e ) {
var target = e.target;
var parent_tr = $(target).parents('tr');
$('.bob_nest').css('display','none');
var info = $(parent_tr).attr("__data");
var name,country,location,gender;
if(typeof(info) != "undefined") {
var list = info.split('||_');
var ele;
for (ele in list){
var info = list[ele].split(";");
if(info[0] == 'name') {
name = info[1];
}else if(info[0] == 'location') {
location = info[1];
}else if(info[0] == 'country') {
country = info[1];
}else if(info[0] == 'country') {
gender = info[1];
}
}
$('.bob_nest').css('display','block');
$('.bob_txt').find('#name').html(name);
$('.bob_txt').find('#country').html(country);
$('.bob_txt').find('#gender').html(gender);
$('.bob_txt').find('#location').html(location);
$('.bob_nest').animate({ height: '40px'}, 700);
}
});
my html code corresponding to this is as follows
-
<div class="my-cont">
<table>
<tr __data="name;mohan||_country;india||_gender;male||location;bangalore" class="" id="person-1">
<td>col1</td>
<td>col2</td>
</tr>
</div>
<div class='bob_nest' style="display: none">
<div class='bob_image">
</div>
<div class='bob_txt'>
<ul>
<li>Name: <span id="name"></span> </li>
<li>Location: <span id="location"></span> </li>
<li>country: <span id="country"></span> </li>
<li>Gender: <span id="gender"></span> </li>
<li></li>
</ul>
</div>
</div>
this is not working, could you please let me know where i am doing wrong?
thanks in advance.
best regards,
mohan