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

回答1:

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" />

来源：https://stackoverflow.com/questions/38889948/primefaces-global-tooltip-with-html-content

标签

html

jsf

primefaces