将鼠标悬停在表格单元格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');
        }
    }
});