CODEWITHSUNDEEP
jsfprimefacestooltip
Arunprasad
Arunprasad

Reputation: 577

Is there any Event for <p:tooltip>?

I'm using primefaces . In my Screen i have to calculate and show the remaining days in <p:tooltip> if mouse cursor is in date field. How to do this ? Is there any event for tooltip ?

Upvotes: 0

Views: 8311

Answers (2)

siebz0r
siebz0r

Reputation: 20339

There are no PrimeFaces events related to p:tooltip however you can use Javascrip/jQuery to simulate lazy loading for a p:tooltip:

<h:form id="form">
    <p:commandButton id="button" value="button" />
    <p:tooltip for="button" id="tooltip">
        <p:outputPanel id="tooltip-content-wrapper">
            <h:outputText value="#{bean.tooltipContent}"
                rendered="#{bean.tooltipVisible}" />
        </p:outputPanel>
    </p:tooltip>
    <p:remoteCommand name="loadTooltip"
        action="#{bean.loadTooltipContent}" update="tooltip-content-wrapper" />
</h:form>
<script type="text/javascript">
$("[id='form:button']").on("mouseover", function() { loadTooltip(); });
</script>

And the backing bean:

public class Bean
{
    private boolean tooltipVisible = false;
    private String tooltipContent = "test";

    public void loadTooltipContent()
    {
        tooltipVisible = true;
    }
}

Upvotes: 1

kolossus
kolossus

Reputation: 20691

<p:toolTip/> defines javascript events that control it's showing (showEvent) and hiding (hideEvent) and both default to mouseover and mouseout respectively. Based on both, you technically could display what you want (preferrably via javascript)

If you're not going the javascript route, you could

  1. Define the title on your date field and bind to a backing bean variable

        <h:inputText id="theDate"  value="#{bean.date}" title="#{bean.daysLeft}"/>

  2. Add the tooltip

         <p:tooltip id="theToolTip" for="theDate"/>

  3. Via an ajax event on the input field , update the title and have it picked up by the tooltip automatically

         <h:inputText id="theDate"  value="#{bean.date}" title="#{bean.daysLefy}">
        <p:ajax event="blur" listener="#{bean.someMethodToUpdateDaysLeft}" update="theDate,theToolTip" execute="theDate"/>
     </h:inputText>

Upvotes: 0

Related Questions