jsf - 带有 Fontawesome 图标的工具提示

标签 jsf primefaces font-awesome

我想使用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>

最佳答案

也许这就是您正在寻找的。它适用于 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!" />

关于jsf - 带有 Fontawesome 图标的工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21831720/

相关文章:

jquery - 如何使用 jQuery 选择 JSF 组件?

java - 尝试建立一个可在多个地方使用的列表

jsf - Primefaces 消息用于验证,其余部分则咆哮

javascript - 可以将自定义图标添加到 font-awesome-react

javascript - JSF 使用 Javascript 设置 CSS 样式?

java - 如何访问基于数组中字符串的方法?

jsf - 仅限 Primefaces 可拖动事件

validation - 如何禁用一个输入字段的默认 JSF 验证和转换

css - FontAwesome 为什么图标以 SVG 格式呈现?

css - 多色单个图标