工具提示无法正常工作

时间:2014-03-24 18:56:03

标签: javascript jquery tooltip

<?php 
foreach ($query as $row){
echo  '<tr><td>
    <label class="checkbox">
    '.form_checkbox('delete[]', $row['link']).anchor("site/see_art/".$row['feed_id'],$row['title'],'class="abc"').
    '<div class="tooltip-inner">'.$row['description'].'</div></td><td>'.substr($row['pub_date'], 5, 12).
    '</label>
    </td></tr>'
    ;
}
?>

JS:

$(".abc").mouseenter(function(){
    clearTimeout($('.tooltip-inner').data('timeoutId'));
    $('.tooltip-inner').show(200);
}).mouseleave(function(){
    var timeoutId = setTimeout(function(){
        $('.tooltip-inner').hide(200);
    }, 650);
    $('.tooltip-inner').data('timeoutId', timeoutId); 
});

$(".tooltip-inner").mouseenter(function(){
    clearTimeout($('.tooltip-inner').data('timeoutId'));
}).mouseleave(function(){
    var timeoutId = setTimeout(function(){
        $('.tooltip-inner').hide(200);
    }, 650);
    $('.tooltip-inner').data('timeoutId', timeoutId); 
});

在视图中我有一个表格,我在其中显示了一些标题。我想悬停链接时显示标题说明。我的问题是,当我将鼠标悬停在链接上时,它显示了所有链接的描述。我不知道如何解决这个问题。

1 个答案:

答案 0 :(得分:0)

这是因为$('.tooltip-inner')选择器 - 它选择了tooltip-inner类的所有元素。

您尝试选择的div<div class="tooltip-inner">)是触发事件的锚点(<a class="abc")的兄弟。要选择此div,请使用siblings()方法:

$(this).siblings(".tooltip-inner")...

但是,您需要重新编写HTML和JavaScript的其他部分才能使其正常工作。