CODEWITHSUNDEEP
jsftooltip
newuser
newuser

Reputation: 8466

How to override the title attribute css in h:outputText

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.

Upvotes: 0

Views: 3947

Answers (1)

BalusC
BalusC

Reputation: 1108642

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)

Upvotes: 1

Related Questions