CODEWITHSUNDEEP
jsfjsf-2primefaces
Menno
Menno

Reputation: 12621

Primefaces conditional tooltip

<p:spinner id="amount" 
           min="0" 
           max="#{bean.availableAmount}" 
           value="#{bean.amount}" />
<p:tooltip for="amount" 
           showEvent="focus" 
           hideEvent="blur" 
           disabled="#{bean.amount lt bean.maxAmount}" 
           value="Maximum amount has been reached" />

I'm looking for a way to implement something like the disabled property on above example. In other words, I'd like to implement a conditional tooltip that only shows IF the condition is met. Does anyone know a way to accomplish this?

Upvotes: 1

Views: 7462

Answers (2)

pvytykac
pvytykac

Reputation: 144

You can also achieve this on client side by using tooltip's widget: 

<p:spinner id="amount" min="0" max="#{bean.availableAmount}" value="#{bean.amount}">  
  <p:ajax oncomplete="myTooltip.hide()" process="@this" />  
</p:spinner>

<p:tooltip id="tooltip"
       for="amount" 
       showEvent="focus" 
       hideEvent="blur" 
       widgetVar="myTooltip"
       value="Maximum amount has been reached" />

Upvotes: 1

Manuel
Manuel

Reputation: 4228

Why don't you use rendered instead of disabled? In that case you need to update the p:tooltip element, when the p:spinner changes its value. Use the ajax spinner from the Primefaces showcase:

<p:spinner id="amount" min="0" max="#{bean.availableAmount}" value="#{bean.amount}">  
  <p:ajax update="tooltip" process="@this" />  
</p:spinner>

<p:tooltip id="tooltip"
           for="amount" 
           showEvent="focus" 
           hideEvent="blur" 
           rendered="#{bean.amount lt bean.maxAmount}" 
           value="Maximum amount has been reached" />

Update (after reading your comments):

If you want to hide the tooltip, you can give the command to execute javascript code from the server side, when the response comes back to the browser:

RequestContext context = RequestContext.getCurrentInstance();
context.execute("hideTooltip();");

which then calls hideTooltip in your javscript code:

function hideTooltip() {
  $("tooltip").hide();
}

Upvotes: 1

Related Questions