Adding pop-up with info to <p:column> with selectionMode attribute

Question

I have a table similiar to this from primefaces showcase (second table - multiple selection with checkboxes): http://www.primefaces.org/showcase/ui/datatableRowSelectionRadioCheckbox.jsf

I'd like to add a little pop-up box (similiar to HTML title attribute) with info when I hover over one of the auto-generated checkboxes (the one in the header which selects all others). Checkboxes are generated by this line of code:

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

Code above creates column with checkbox rows. Header row is a special checkbox which selects all other checkboxes. I want to add a onhover message like "clicking this will select all checkboxes" for example.

I've tried the following but nothing works:

title attribute from HTML
<p:toolkit> tag
<p:overlayPanel> tag (the problem is it should be used on some elements inside p:column, for example text, but in my case there is no content in p:column - just generated checkbox)

Celebes Celebes · Accepted Answer · 2013-09-09T14:09:25

I managed to solve it on my own.

I created a div outside of <p:dataTable> (in my case: on top of the page)
I styled said div similiar to default pop-up when using title="..." attribute. I also added position:absolute and display:none.
I added jQuery script which keeps track of mouse coordinates and then when mouse is over checkbox uses them as top and left attributes of div and changes said div display to block. It causes div to appear near mouse cursor on checkbox hover.

It is also important to know that in primefaces the checkbox specified by me in question has always class named ui-chkbox-all

Here's the code:

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

Adding pop-up with info to <p:column> with selectionMode attribute

1 Answers