Question

观点：

<table class="table table-hover">

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

JS：

<script>
$(".checkbox").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); 
});
</script>

我有一个视图，我显示一些标题。工具提示有效，但是这样：当我悬停标题时，它会显示每个标题的描述，就像我将所有标题悬停在一起，即使我只悬停一个标题。我希望当我悬停标题时只显示他的描述。我不知道如何解决这个问题。

Answer 1

对于.tooltip-inner上的jQuery选择器，请使用$('.tooltip-inner', this)。这将仅选择.checkbox标签内的工具提示。

<强>的JavaScript

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

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

此外，您的HTML标记不正确。您在关闭标签标签之前关闭表数据。这是一个工作示例的小提琴：http://jsfiddle.net/JWyLU/

Answer 2

问题在于您选择了所有类tooltip-inner的元素。您只希望jQuery选择器应用于您悬停的标签内的元素。所以只要你有这个选择器

$('.tooltip-inner')

您想将其更改为

$(this).find('.tooltip-inner')

工具提示无法正常工作

2 个答案: