使用 selectionMode 属性将带有信息的弹出窗口添加到 <p:column>答案

【问题标题】：Adding pop-up with info to <p:column> with selectionMode attribute使用 selectionMode 属性将带有信息的弹出窗口添加到 <p:column>
【发布时间】：2013-09-12 19:26:17
【问题描述】：

我在 primefaces 展示中有一张与此类似的表格（第二张表格 - 带有复选框的多项选择）： http://www.primefaces.org/showcase/ui/datatableRowSelectionRadioCheckbox.jsf

当我将鼠标悬停在其中一个自动生成的复选框（选择所有其他复选框的标题中的那个）上时，我想添加一个带有信息的小弹出框（类似于 HTML 标题属性）。复选框是由这行代码生成的：

<p:column selectionMode="multiple" style="width:2%" />

上面的代码创建带有复选框行的列。标题行是一个特殊的复选框，它选择所有其他复选框。例如，我想添加一条悬停消息，例如“单击此按钮将选中所有复选框”。

我尝试了以下方法，但没有任何效果：

来自 HTML 的 title 属性
<p:toolkit>标签
<p:overlayPanel> 标签（问题是它应该用于 p:column 内的某些元素，例如文本，但在我的情况下 p:column 中没有内容 - 只是生成的复选框）

【问题讨论】：

标签： html jsf jsf-2 primefaces

【解决方案1】：

我自己解决了。

我在<p:dataTable> 之外创建了一个 div（在我的例子中：在页面顶部）
当使用title="..." 属性时，我将所说的 div 设置为类似于默认弹出窗口的样式。我还添加了position:absolute 和display:none。
我添加了跟踪鼠标坐标的 jQuery 脚本，然后当鼠标悬停在复选框上时，将它们用作 div 的 top 和 left 属性，并将所述 div 显示更改为 block。它会导致 div 在复选框悬停时出现在鼠标光标附近。

同样重要的是要知道，在 primefaces 中，我指定的复选框始终具有名为 ui-chkbox-all 的类

代码如下：

HTML：

<div id="test">TEST</div>

CSS：

#test 
{
    border: 1px #767676 solid;
    color: #767676;
    padding: 2px;
    text-align: center;
    background-color: white;
    width: 100px;
    position: absolute;
    display: none;
}

JAVASCRIPT/JQUERY：

var mouseX;
var mouseY;

$(document).mousemove( function(e) {
    mouseX = e.pageX - 80;
    mouseY = e.pageY - 80;
});

$(document).ready(function(){
    $(".ui-chkbox-all").mouseenter(function(){
        $("#test").css("display", "block");
        $("#test").css({'top':mouseY,'left':mouseX}).fadeIn('slow');
    });
});

$(document).ready(function(){
    $(".ui-chkbox-all").mouseleave(function(){
        $("#test").fadeOut('slow');
    });
});

【讨论】：