将鼠标悬停在表格单元格上时弹出窗口 html javascript

Question

我正在编写一个 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'
        });
    }

Answer 1

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

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