Primefaces提供HTML内容的全球工具提示 [英] Primefaces global tooltip with HTML content

问题描述

 < p：dataTable在我的JSF页面中，我使用了一个带有工具提示的数据表。 var =item...> 
< p：列headerText =＃{bundle ['item.name']}> 
<！ -  
< h：outputText value =＃{item.name}title =＃{simpleTooltipGenerator.generate（item）}/> 
  - > 
< h：outputText id =namevalue =＃{item.name}/> 
< p：tooltip for =nameescape =falsevalue =＃{simpleTooltipGenerator.generate（item）}/> 
< / p：栏> 
< / p：dataTable> 
  

simpleTooltipGenerator.generate（）是一个方法，它会生成以下HTML工具提示：

 < div class =ui-tooltip-text ui-shadow ui-corner-所有> 
< table> 
< tbody> 
< tr>< td class =key>姓氏< / td>< td class =value> Doe< / td>< / tr> 
< tr>< td class =key>名字< / td>< td class =value>约翰< / td>< / tr> 
< / tbody> 
< / table> 
< div class =adresse spacer>< / div> 
< div class =adresse title>地址< / 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> 
  

这可以按预期工作，但是当我使用全局工具提示< p ：tooltip escape =false/> 以及< h：outputText value =＃{item.name}title =＃{simpleTooltipGenerator.generate（item ）}/> 只有生成的HTML代码显示在工具提示中！使用全文工具提示的固定文本有效吗？！

这是一个错误，全局工具提示不支持HTML内容，即使设置 escape =false，或者不支持？！

我的环境是WildFly 10.0.0-Final上的Primefaces 6.0

解决方案

From PrimeFaces文档：
$ b

全局工具提示

...
由于全局工具提示效率更高
，因为在所有工具提示目标中只使用一个工具提示实例，所以建议使用
显式工具提示除非您有自定义案例，例如不同的选项，自定义内容。

说这是n不支持。当我尝试它仍然工作。所以你的问题似乎缺少默认为 a，：input，：button 的globalSelector 属性。

如果您要支持< h：outputText /> （其呈现为< span />


 < p：tooltip escaped =falseglobalSelector = a，：input，：button，span/> 
  




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

解决方案

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

这篇关于Primefaces提供HTML内容的全球工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！