0

我想将下面的 css 覆盖到 h:outputText 中的 title 属性。

    css:

    <style type="css/text">

    .title
    {
        border : 1px solid  #FF9933;
        font-family : verdana;
        font-size : 14px;
        font-weight:normal;
        color: #000000;
        background-color:#fae6b0;
        padding : 5px 5px 5px 5px";
    }
</style>

<h:outputText id="userName"
             value="#{userBean.userName}"
             title="#{userBean.userName}"/>

     <h:outputText id="userAddress"
             value="#{userBean.userAddress}"
             title="#{userBean.userAddress}"/>

在以下链接的帮助下。我试图改变html中的title属性，它工作正常。

如何更改锚标签内 Title 属性的样式？

如何将相同的东西应用到richfaces中。

4

1 回答 1

1

由 HTML 元素的title属性表示的工具提示不能由 CSS 设置样式。该样式完全由网络浏览器控制，通常以客户端操作系统平台默认工具提示样式表示。因此，例如，当客户端运行 Windows 7 时，工具提示将以 Windows 7 默认样式呈现。同样，您无法控制这一点。

您最好的选择是用一个在鼠标悬停/移出时出现/消失title的完整 HTML 替换该属性。<div>这允许通过通常的 CSS 方式完全控制样式。如您所知，RichFaces 有一个<rich:tooltip>组件可以做到这一点。如果由于某种原因它对您来说还不够，那么您可能需要考虑寻找另一个 JS/jQuery 插件，它会自动将所有title属性转换为可样式化的<div>元素。其中之一是qTip。那么你所需要的基本上是：

<h:outputScript name="scripts/jquery.qtip-1.0.0-rc3.min.js" target="head" />
<h:outputScript target="body">$("[title]").qtip();</h:outputScript>

（前提是您使用的是已经捆绑了 jQuery 的 RichFaces 版本，因此您不需要手动包含 jQuery）

于 2013-04-25T11:52:51.290 回答