jquery - Mysql表onmouseover显示具体值

Question

我有一个网页，显示一个包含 mysql 数据库中的值的表。一个值由一个图标表示，当我单击该图标时，该值会在弹出窗口中弹出...我更喜欢将鼠标悬停或悬停并在鼠标指针附近出现的信息框中显示该值。它按原样工作得很好，当鼠标悬停时，会出现一个带有特定值的弹出窗口，当鼠标移开时，它会消失。我该怎么做才能显示悬停框而不是弹出窗口

<td align="center">
    <a href="#" onMouseOver="openPopUp('info_formz.php?`enter code here`id=$rows[id]', 'popup', 200, 20);" onMouseOut=" closePopUp('info_formz.php?id=$rows[id]')">
        <img src=backgrounds" . $rows['complete'] . ".png border="0">
    </a>
</td>

这是让它工作的脚本

<script>
<!--
function openPopUp(url, name, w, h)
{
    // Fudge factors for window decoration space.
    // In my tests these work well on all platforms & browsers.
    w += 32;
    h += 96;
    win = window.open(url,
        name,
        'width=' + w + ', height=' + h + ', ' +
        'location=no, menubar=no, ' +
        'status=no, toolbar=no, scrollbars=yes, resizable=no');
    win.resizeTo(w, h);
    win.focus();
}

function closePopUp() {
    win.close();
}

// -->
</script>

Answer 1

最好是使用插件，例如 http://qtip2.com/ .

这是一个小例子:

$('[data-tooltip!=""]').qtip({ 
    content: {
        attr: 'data-tooltip' 
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/basic/jquery.qtip.min.js"></script>
<link href="http://cdn.jsdelivr.net/qtip2/2.2.1/basic/jquery.qtip.min.css" rel="stylesheet"/>
<td align="center">
    <a href="#" data-tooltip="Some very cool informative stuff goes in here.">
        <img src=backgrounds.png border="0">
    </a>
</td>

编辑

回复您的评论。看看他们关于 loading content via ajax 的文档.

使用与上面相同的布局，示例:

$(document).ready(function(e) {
    $('[data-tooltip]').each(function() {
        $(this).qtip({
            content: {
                text: function(event, api) {
                    $.ajax({
                        url: 'info_formz.php', // Use data-url attribute for the URL
                        data: {
                            id: $(this).attr('data-tooltip')
                        }
                    }).then(function(content) {
                        // Set the tooltip content upon successful retrieval
                        api.set('content.text', content);
                    }, function(xhr, status, error) {
                        // Upon failure... set the tooltip content to the status and error value
                        api.set('content.text', status + ': ' + error);
                    });

                    return 'Loading...'; // Set some initial text
                }
            }
        });
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/basic/jquery.qtip.min.js"></script>
<link href="http://cdn.jsdelivr.net/qtip2/2.2.1/basic/jquery.qtip.min.css" rel="stylesheet"/>
<td align="center">
    <a href="#" data-tooltip="<?= $rows[id]; ?>">
        <img src=backgrounds.png border="0">
    </a>
</td>