Is there any Event for <p:tooltip>?

Question

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 ?

Answer 1

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

Answer 2

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