How to override the title attribute css in h:outputText

Question

i want to override the below css to the title attribute in h:outputText.

    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}"/>

With the help of below link. I tried to change the title attribute in html, it works fine.

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

how to apply the same thing into the richfaces.

You cannot style the title attribute (the popup isn't part of HTML), even the thing you linked is just a workaround. — Makhiel, Apr 25 '13 at 08:15
Already i used rich:tooltip to display the values. In IE it takes long time to render the page. So i remove all the tooltip and using the title attribute. The title attribute css looking simple. So i want to improve the style to display. Any other option to change it. — newuser, Apr 25 '13 at 08:23

BalusC · Accepted Answer · 2013-04-25T12:11:38.777

The tooltip as represented by the HTML element's title attribute is not styleable by CSS. The style is fully controlled by the webbrowser and is usually represented in client operating system platform default tooltip style. So, e.g. when the client is running Windows 7, then the tooltip will be presented in Windows 7 default style. Again, you have no control over this.

Your best bet is to replace the title attribute by a fullworthy HTML <div> which appears/disappears on mouseover/out. This allows full control over styling by the usual CSS means. As you already know, RichFaces has a <rich:tooltip> component which does exactly that. If it is insufficient for you for some reason, then you may want to consider to look for another JS/jQuery plugin which will automagically convert all title attributes to styleable <div> elements. One of them is qTip. All you need is then basically:

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

(provided that you're using a RichFaces version which already ships with jQuery bundled, so that you don't need to manually include jQuery)

How to override the title attribute css in h:outputText

1 Answers1