Question

我的PHP：

<?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']).'
                <div class="tooltip-inner">'
                    .$row['description'].
                '</div>
            </td>
            <td>'
            .substr($row['pub_date'], 5, 12).

我的jQuery：

<script>
$(".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); 
});
</script>
            '
        </label>
        </td>
    </tr>';
}?>

在PHP中，当我将鼠标悬停在它们上面时，我会有一些标题显示其描述。一切正常，除非我加载页面。页面加载时，工具提示可见，直到我将鼠标悬停在链接上。将鼠标悬停在链接上后，工具提示会隐藏起来。我知道这是因为我回应了div。一些帮助？

Answer 1

加载页面时，您没有隐藏工具提示。

$(document).ready(function(){
    $('.tooltip-inner').hide();
});

如果您已经有$（文件）.ready（），那么只需将隐藏代码放在最顶层。

Answer 2

如果你不希望它们闪烁，那么请使用css隐藏它们而不是js。

在你的css中有这样的东西

.tooltip-inner {
display:none;
}

JS工具提示以错误的方式工作

2 个答案: