工具提示不适用于动态创建的内容php

Question

我在我的应用程序中使用工具提示，但它不适用于动态内容。

当我在静态内容上使用我的工具提示时，它工作正常。见fiddle。

但是，对动态内容它不工作时创建。

问题：鼠标悬停时，工具提示被隐藏;工具提示div.tooltip不应该隐藏。 看到这里，如果你想看到直播：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代码：

<?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

您使用它之前，您必须绑定到mousemove，

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

前

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'); 
}