JSF/ Styling h:outputText工具提示

Question

我想创建一个自定义的工具提示外观。

<h:outputText value="blarg" title="tooltip">

请不要告诉我使用rich:tooltip，因为我已经尝试过了，他们有一个bug，它延伸超过一个数据表。所以我想知道是否有可能实际设置jsf的outputText工具提示的样式。

如果你知道怎么做，请给我指点。

谢谢。祝你今天愉快。

Answer 1

您不能使用普通的HTML/CSS设置工具提示的样式。要做到这一点，还需要使用JavaScript，它遍历HTML DOM树，并将每个title属性“转换”成一些隐藏的、看起来很花哨的<div>，在onmouseover期间显示出来。

既然RichFaces已经与jQuery一起发布了，那么应该可以为此获取一个jQuery插件。例如，qTip plugin。

请不要告诉我像我尝试过的那样使用<rich:tooltip>，他们有一个bug，它延伸到数据表之外。

从技术上讲，这应该是一个微调与<rich:tooltip>相关的CSS的问题。

Answer 2

你可以做到这一点。

使用Primefaces的<p:tooltip/>。

查看：

<h:panelGrid columns="2" cellpadding="10">
    <h:outputLink styleClass="outputText" id="fades" value="#">
       <h:outputText value="Your text"/>
    </h:outputLink>
    <p:tooltip id="toolTipFades" for="fades" value="The text for tooltip"/>
</h:panelGrid>

Css：

.outputText{
 cursor: default!important;
 text-decoration: none!important;
 }

使用此代码，您可以使用工具提示模拟一个<h:outputText />并运行;D