Question

我想将以下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属性，它工作正常。

How to change the style of Title attribute inside the anchor tag?

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

Answer 1

由HTML元素的title属性表示的工具提示不能通过CSS设置样式。该样式完全由webbrowser控制，通常以客户端操作系统平台默认工具提示样式表示。所以，例如当客户端运行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）

如何在h：outputText中覆盖title属性css

1 个答案: