JSF/Styling h:outputText工具提示

Question

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

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

请不要告诉我使用富：工具提示，因为我已经尝试过了，他们有一个错误，它扩展到了数据表之外。所以我想知道是否有可能真正为jsf的outputText工具提示设置样式。

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

谢谢。祝你今天过得愉快。

Answer 1

不能使用普通HTML/CSS来设置工具提示的样式。为此，您还需要JavaScript，它遍历HTML DOM树，并将每个title属性"转换"为一些隐藏的、外观奇特的<div>，在onmouseover期间显示。

由于RichFaces已经提供了jQuery，因此应该可以为此获取一个jQuery插件。例如，qTip插件。

请不要告诉我使用<rich:tooltip>，因为我已经尝试过了，他们有一个错误，它扩展到了数据表之外

从技术上讲，这应该是一个微调与<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