将鼠标悬停在表格单元格 HTML JavaScript 上时的弹出窗口

popup window when hover over a table cell html javascript

本文关键字：窗口 JavaScript HTML 悬停 鼠标 表格 单元格      更新时间：2023-09-26

我正在编写一个JavaScript应用程序，我找到了一个不错的库qtip2。我的目标是当用户将鼠标悬停在表格中的每个单元格上时，将显示不同的信息。我上面提到的那个库可以在一个小弹出窗口中显示信息。但是，我不确定如何在其他单元格中设置此功能以在将鼠标悬停在单元格上时显示每个单元格的特定内容。有人知道我该如何做到这一点吗？

function showInfo()
    {
            $('#demo-mouse').qtip({
                content : 'I position myself at the current mouse position',
                position : {
                    my : 'top left',
                    target : 'mouse',
                    viewport : $(window),       //keep it on-screen at all time if possible
                    adjust : {
                        x : 10, y : 10
                    }
                },
                hide : {
                    fixed : true                // Helps to prevent the tooltip from hiding occassionaly when tracking!
                },
                style : 'ui-tooltip-shadow'
        });
    }
可以使用

扩展content属性，并在要显示提示的元素中使用类：

$('.selector').qtip({
    content: {
        text: function(api) {
            // Retrieve content from custom attribute of the $('.selector') elements.
            return $(this).attr('data-tip');
        }
    }
});
相关文章：