Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>As BalusC mentioned, you can just use Primefaces, and here is a sample code using the <a href="http://stevenbenner.github.io/jquery-powertip/" rel="nofollow">PowerTip</a> jQuery plugin:</p> <pre><code>&lt;p:selectOneMenu id="users" converter="userConverter" var="u"&gt; &lt;f:selectItems value="#{userManagedBean.users}" var="user" itemLabel="#{user.firstName}" itemValue="#{user}"/&gt; &lt;p:column &gt; &lt;span customData="#{u.emailOrAnyOtheInfoYouWantToDisplayInTooltip}" class="aClassForTooltips"&gt; &lt;h:outputText value="#{u.firstName} - #{u.lastName}" /&gt; &lt;/span&gt; &lt;/p:column&gt; </code></pre> <p></p> <p>And on the jQuery part:</p> <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt; &lt;h:outputScript name="js/jquery.powertip.min.js" /&gt; &lt;script type="text/javascript"&gt; $.noConflict(); jQuery(document).ready(function () { jQuery('.aClassForTooltips').each(function(){ var elementToH = jQuery(this), data = elementToH.attr('customdata').replace(/%20/g,' '); elementToH.data('powertip', function() { return '&lt;div style="background-color:black;width:200px;height:25px"&gt;'+data+'.&lt;/div&gt;'; }); /////// elementToH.powerTip({ placement: 'ne' // north-east tooltip position }); ////// }); }); </code></pre> <p> Notice the use of a custom attribute in the <code>span</code> element. This attribute is ignored by JSF renderers if used with any JSF component, that's why you need a span.<br> Finally do not forget to include at least this CSS:</p> <pre><code>#powerTip { position: absolute; display: none; z-index: 2147483647; color:red; } </code></pre> <p>I hope this helps </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload