CODEWITHSUNDEEP
htmljsfprimefaces
raho
raho

Reputation: 321

Primefaces global tooltip with HTML content

In my JSF page I am using a datatable with tooltip on a row column like this:

<p:dataTable var="item" ...>
  <p:column headerText="#{bundle['item.name']}">
    <!--
    <h:outputText value="#{item.name}" title="#{simpleTooltipGenerator.generate(item)}"/>
    -->
    <h:outputText id="name" value="#{item.name}"/>
    <p:tooltip for="name" escape="false" value="#{simpleTooltipGenerator.generate(item)}"/>
  </p:column>
</p:dataTable>

The simpleTooltipGenerator.generate() is a method which generates the following HTML tooltip:

<div class="ui-tooltip-text ui-shadow ui-corner-all">
  <table>
    <tbody>
      <tr><td class="key">Lastname</td><td class="value">Doe</td></tr>
    <tr><td class="key">Firstname</td><td class="value">John</td></tr>
    </tbody>
  </table>
  <div class="adresse spacer"></div>
  <div class="adresse title">Address</div>
  <table>
    <tbody>
      <tr><td class="key">OFFICE</td><td class="value">...</td></tr>
      <tr><td class="key">HOME</td><td class="value">...</td></tr>
    </tbody>
  </table>
</div>

This works as expected, but when I use a global tooltip <p:tooltip escape="false"/> together with <h:outputText value="#{item.name}" title="#{simpleTooltipGenerator.generate(item)}"/> only the generated HTML code is shown in the tooltip! Using a fixed text for the global tooltip works?!

Is this a bug, that global tooltip does not support HTML content, even if set escape="false", or is this not supported?!

My environment is Primefaces 6.0 on WildFly 10.0.0-Final

Upvotes: 1

Views: 5494

Answers (2)

Haris Žujo
Haris Žujo

Reputation: 1

The problem with the tooltip when used as presented in the question is that the tooltip does not support lazy loading of content (or I don't know how). Thus, the content of the tooltip is already generated when the table is drawn on the screen, which is not exactly desirable when there is a large amount of data and a long tooltip. We don't save much by using the global tooltip, since the title is already generated with data too!

Upvotes: 0

irieill
irieill

Reputation: 1252

From PrimeFaces Documentation:

Global Tooltip

... As global tooltips are more efficient since only one instance of tooltip is used across all tooltip targets, it is suggested to be used instead of explicit tooltips unless you have a custom case e.g. different options, custom content.

First I would say this is not supported. As i tried it worked nevertheless. So your problem seems to be missing globalSelector attribute which defaults to a,:input,:button

If you want to support <h:outputText /> (which renders as <span />) binding, just add a propper selector like:

<p:tooltip escaped="false" globalSelector="a,:input,:button,span" />

Upvotes: 2

Related Questions