Wednesday, July 17, 2013

How to create multiple lines message p:tooltip

From the PrimeFaces online demo, showing the usage of <p:tooltip /> component.
But all the samples displaying only single line message.
p:tooltip demo

Sometimes, the system requirements might need to display the message in multiple lines instead of just a long single line message.

this could be achieved by putting in a <h:panelGroup /> into the <p:tooltip /> component.
Then all content could be put inside the panelGroup, eg, <p:panel />, <p:graphicImage />, etc.


Sample Code:
<p:tooltip id="toolTipLnk" for="lnk">
    <h:panelGroup>
        <h:outputText value="this is line 1 message" /><br />
        <h:outputText value="this is line 2 message" /><br />
        <h:outputText value="this is line 3 message" />
    </h:panelGroup>
</p:tooltip>

Output:
p:tooltip with multiple lines message


Done!!

LinkWithin

Related Posts Plugin for WordPress, Blogger...