How to permanently show a p:tooltip?

Question

I'm trying to permanently show the p:tooltip in a PrimeFaces project I'm working on.
This is my current code:

<p:graphicImage id="testImg" name="/img/testImg.jpg" onclick="PF('info').show();" style="cursor: pointer"/> 
<p:tooltip for="testImg" value="further information" position="right" />
<p:dialog widgetVar="info" modal="true" closeOnEscape="true" >
    <h:outputText value="bla bla bla"/>
</p:dialog>

I tried this:

<p:tooltip for="testImg" value="further information" position="right" showEevent="permanent"/>

but it didn't work.

Is there any way to control the tooltip and have it permanently visible without having to mouse over or focus the controlling element?

So, basically you want to show a text at the right hand side of your image? Why not simply add a text and add the style class `ui-tooltip`? — Jasper de Vries, Feb 09 '18 at 10:06

score 2 · Accepted Answer · answered Mar 04 '18 at 13:58

As you have noticed, there is no show event called permanent. What you could do is controlling the tooltip with JavaScript using a widget variable. You can assign one for the tooltip using the widgetVar attribute. The tooltip widget has several functions, one of them is show() (to show the tooltip).
When the tooltip is shown there is a delay of 150 msec, so set that to 0 to immediately show the tooltip. To prevent the tooltip from being hidden, set the hideEvent to some non existing event (like none).

Putting it all together:

<h:panelGrid columns="3">
  <h:outputText value="Permanent" />
  <p:inputText id="permanent"
               title="Permanent tooltip" />
  <p:tooltip id="permanentTip"
             for="permanent"
             widgetVar="permanentTip"
             showDelay="0"
             hideEvent="none"/>
</h:panelGrid>

<script>
  $(function(){ 
    PF('permanentTip').show();
  });
</script>

How to permanently show a p:tooltip?

1 Answers1