Question

我有一个网页，显示一个包含mysql数据库值的表。一个值由一个图标表示，当我点击图标时，弹出窗口中弹出一个值......我更喜欢鼠标悬停或悬停，并在鼠标指针附近出现的信息框中显示该值。它的工作原理非常好，在鼠标悬停时，弹出窗口会显示特定值，并且onmouseout它会消失。如何显示悬停框而不是弹出窗口

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

Mysql表onmouseover显示特定值

1 个答案:

修改