Search code examples
jsfprimefacestooltip

Keep primefaces tooltip visible until its manually closed


I wanted to create a tooltip with dynamic content on a button hover and show a data table inside it. After a little bit of googling i managed to get that working but with a small issue. I am not able to keep the tooltip visible until its manually closed and primesfaces tooltip options do not seem to have any property to achieve something like that.

Code for tooltip:

<h:panelGroup>
    <h:outputLink id="lnk" value="#">
        <h:outputText value="Sample Tooltip"/>
    </h:outputLink>
    <p:tooltip for="lnk" position="right" />
        <p:dataTable var="car" value="#{preOrderController.cars}">
            <p:column headerText="Id">
                <h:outputText value="#{car.id}" />
            </p:column>

            <p:column headerText="Year">
                <h:outputText value="#{car.name}" />
            </p:column>

        </p:dataTable>
</h:panelGroup>

The tooltip works fine, what I want to do is once the mouse is hovered over the button and tooltip is shown, I want to keep it visible until the user manually clicks the close button at the top right corner or somewhere else on the screen. It is not necessary that I use tooltip, if primefaces has something else that can used to get similar functionality I am open to suggestions.


Solution

  • The solution is here

    <h:form>
    <h:panelGrid>
        <h:panelGroup>
            <p:commandButton value="Hide" type="button" onclick="PF('tooltip').hide();"/>  
        </h:panelGroup>
        <h:panelGroup>
            <p:commandLink id="focus" value="link" onmouseover="PF('tooltip').show()"/>
     <p:tooltip value="This is a tooltip" for="focus" hideEvent="blur" widgetVar="tooltip"/>
        </h:panelGroup>
    </h:panelGrid>
    </h:form>