Question

我想使用fontawesome作为工具提示文本，但我不知道如何实现它。它使用了叠加面板，但我想使用<p:tooltip>标记。

我使用primefaces 4.0和jsf 2.1 这是带有工具提示的代码

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<p:graphicImage id="grap" class="fa fa-question-circle fa-2x"/>
<p:tooltip for="grap" value="Some Help" showEffect="fade" />

如果我使用以下内容，则可以使用

<h:panelGroup id="mail" class="fa fa-question-circle fa-2x" />
 <p:overlayPanel for="mail" showEvent="mouseover" hideEvent="mouseout" hideEffect="fade">
   <p:panel>
         TEXTTEXTTEXT
   </p:panel>
  </p:overlayPanel>

Answer 1

也许这就是你要找的东西。它适用于Primefaces 6.0和JSF 2.3.0。

<p:outputLabel id ="idEmptyLabel">
    <i class="fa fa-question-circle fa-2x"/>
</p:outputLabel>
<p:tooltip for="idEmptyLabel" value="It works!" />

Answer 2

@Dylan Law 的解决方案肯定会奏效。

但是，如果您不想总是包装标准 HTML 元素，例如 <i>、<span>、<img> 和 <div>，您可以遵循以下策略：

在模板或文件中定义以下行：

<p:tooltip globalSelector="a,:input,:button,span,img,i,div" />

globalSelector 是一个 jQuery 选择器，默认为 a,:input,:button。因此，我还将这些也添加到了我的自定义选择器中。

现在您可以简单地编写例如：

<i class="fas fa-info-circle" title="This will be the content of the tooltip">

您可以在此处阅读有关全局工具提示的更多信息： https://primefaces.github.io/primefaces/8_0/#/components/tooltip?id=global-tooltip

带有Fontawesome图标的工具提示

2 个答案: