JSF/ Styling h:outputText tooltip

Question

I would like to create a custom look for a tooltip.

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

Plese do not tell me to use rich:tooltip as I have tried and they have a bug where it extends past a data table. So I was wondering if it is possible to actually style the jsf's outputText tooltip.

If you know how to, please give me pointers.

Thank you. Have a good day.

Answer 1

You cannot style a tooltip using plain vanilla HTML/CSS. You really need JavaScript for this as well which walks through the HTML DOM tree and "converts" every title attribute into some hidden fancy looking <div> which gets shown during onmouseover.

Since RichFaces already ships with jQuery, it should be possible to grab a jQuery plugin for that. For example, the qTip plugin.

Please do not tell me to use <rich:tooltip> as I have tried and they have a bug where it extends past a data table.

It should technically be a matter of finetuning the CSS associated with the <rich:tooltip>.

Answer 2

You can do this.

Use <p:tooltip/> of Primefaces.

View:

<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;
 }

With this code you simulate a <h:outputText /> with a tooltip and works ;D