Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I put line break in p:tooltip

How can I put a line break to the PrimeFaces tooltip component to separate the first line from the second line?

<p:tooltip id="toolTip"
           for="idButton"
           value="First line Second Line"
           position="top"/>
like image 442
borchvm Avatar asked Mar 06 '23 11:03

borchvm


2 Answers

To show the tooltip with a line break you have to put it like this

<p:tooltip for="...">
    <h:outputText value="First line"/>
    <br/>
    <h:outputText value="Second line"/>
</p:tooltip>

Or using PrimeFaces Extensions (pe:tooltip)

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pe="http://primefaces.org/ui/extensions">
...

<pe:tooltip for="...">
    <h:outputText value="First line <br/> Second line" escape="false" />
</pe:tooltip>

https://forum.primefaces.org/viewtopic.php?t=23196

like image 77
borchvm Avatar answered Mar 08 '23 01:03

borchvm


PrimeFaces tooltip supports the escape attribute since 5.1, so just do

<p:tooltip id="toolTip"
           for="idButton"
           value="First line<br/> Second Line"
           position="top"
           escape="false"/>

But if you want to have a more 'visible' html, you can also do

<p:tooltip id="toolTip" for="idButton" position="top">
    First line
    <br/>
    Second Line
</p:tooltip>
like image 26
Kukeltje Avatar answered Mar 07 '23 23:03

Kukeltje