Html 将带有信息的弹出窗口添加到<；p：列>；使用selectionMode属性

我在primefaces showcase中有一个与此类似的表（第二个表-带复选框的多项选择）：

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

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

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

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

• title

  HTML中的属性

• 标签

• 标记（问题是它应该用于p:column中的某些元素，例如text，但在我的例子中，p:column中没有内容-刚刚生成的复选框）

---

我自己设法解决了这个问题
• 我在
  之外创建了一个div（在我的例子中：在页面顶部）
• 当使用

  title=“…”

  属性时，我将said div设置为与默认弹出窗口类似的样式。我还添加了

  位置：绝对

  和

  显示：无

• 我添加了jQuery脚本，它跟踪鼠标坐标，然后当鼠标结束时，复选框将它们用作div的

  top

  和

  left

  属性，并将所述div显示更改为

  block

  。它使div出现在复选框悬停时鼠标光标附近
同样重要的是要知道，在primefaces中，我所指定的复选框始终是名为

ui-chkbox-all

代码如下：
HTML:

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

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

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');
    });
});

JAVASCRIPT/JQUERY:

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

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

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');
    });
});