tooltip is not working on dynamic created content php

Question

I am using a tooltip in my application, but it is not working with dynamic content.

When I use my tooltip on static content it works fine. See fiddle.

But, when created on dynamic content it is not working.

The issue : The tooltip is hiding when mouseover; the tooltip div.tooltip should not hide. See here if you want see live : http://propertydefine.com/

<script>
$(document).ready(function(){

$('[rel=tooltip]').bind('mouseover', function () {
    if ($(this).hasClass('ajax')) {
        var ajax = $(this).attr('ajax');
        $.get(ajax, function (theMessage) {
            $('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
        });
    } else {
        var theMessage = $(this).attr('content');
        $('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
    }

    $(this).bind('mousemove', function (e) {
        $('div.tooltip').css({
            'top': e.pageY - ($('div.tooltip').height() / 2) - 5,
                'left': e.pageX + 15
        });
    });
});

$(document).on('mouseout click', 'div.tooltip', function(){
    $('div.tooltip').fadeOut('slow', function(){
        $(this).remove();
    }); 
});

});
</script>

php code :

<?php
    include 'config.php'; 
//$query = "
//SELECT UserName,firstName,lastname,Mobile_Number1,Type_cust,City,location,Company_name,company_logo FROM registration WHERE City = 'Navi Mumbai'";
$query="SELECT registration.UserName,firstName,lastname,Mobile_Number1,Type_cust,City,location,Company_name,company_logo FROM registration LEFT JOIN featureddealer on registration.UserName=featureddealer.UserName WHERE City = 'Navi Mumbai' and ActiveFlag='y'" ;
$result = mysql_query($query) or die ("Query failed");
//get the number of rows in our result so we can use it in a for loop
$numrows = (mysql_num_rows ($result));
// loop to create rows
if($numrows >= 1){
for ($r = 0; $r <= $numrows; $r++) {
// loop to create columns
while ($friendList = mysql_fetch_array($result))
 {     
 $_SESSION['firstName'] = $friendList['firstName'];

//Create table

if($friendList['company_logo'] == "")
{
$friendList['company_logo'] = "images/nophoto.jpeg";
}


echo " <tr> <td class='td2'>"; 

echo '<a href=#  alt=Image id='.$friendList['Company_name'].' class=clicker Tooltip rel=tooltip content="<div class=td2><div id=imagcon><img width=100px height=100px    src=Dealer/'.$friendList['company_logo'].' class=tooltip-image /></div> <div id=con>'.$friendList['Company_name'].'</div><div id=con> '.$friendList['location'].' '.$friendList['City'].'</div><div id=con> '.$friendList['Type_cust'].' :'.$friendList['firstName'].' '.$friendList['lastname'].'<div id=con> 9930651106 </div> </div> <div id=con> <a href=# > View All Details </a>   </div>
<br/>

  <div id=con >


  '

  ;






  ?>



  <?php

Answer 1

You must bind to mousemove before you use it,

$(this).bind('mousemove', function (e) {
    $('div.tooltip').css({
        'top': e.pageY - ($('div.tooltip').height() / 2) - 5,
            'left': e.pageX + 15
    });
});

before

if ($(this).hasClass('ajax')) {
    var ajax = $(this).attr('ajax');
    $.get(ajax, function (theMessage) {
        $('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
    });
} else {
    var theMessage = $(this).attr('content');
    $('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
}