Tooltip - Multiline support missing when updating from 1.x to 2.0.1

[luigidallavalle]

I'm submitting a ...

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
http://plnkr.co/edit/VChLUx?p=preview

Current behavior
If I put a <BR> in the tooltip body the <BR> is rendered as if it's normal text, the version 1, let me write a multi line tooltip simply using <BR>

Expected behavior
I would like the tooltip text to go on a new line at every <BR>

Minimal reproduction of the problem with instructions
Run the plunker attached

Please tell us about your environment:
Win10, webpack

• Angular version: 2.4.1

• PrimeNG version: 2.0.1

• Browser: tested only on chrome

• Language: TypeScript 2.0.10

[szurilo]

Same issue here.
Any solution?

[luigidallavalle]

@szurilo were you able to make up a workaround?
any chance to get some feedback?

[szurilo]

No, I am still waiting for a solution.

…

On Mar 15, 2017 12:02 AM, "Luigi Dallavalle" ***@***.***> wrote: @szurilo <https://github.com/szurilo> were you able to make up a workaround? any chance to get some feedback? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2205 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXGqGJfzbNC9s6szZrLfqvkJdazpBxsxks5rlxx5gaJpZM4MRlv7> .

[sunkike]

workaround ...

Source in: http://pastebin.com/Q4PHB5br

I have added a function addText(node,text) and replaced de line:
//tooltipText.appendChild(document.createTextNode(this.text));
addText(tooltipText,this.text);

To use it: ptooltip = "line 1
line 2
line 3"

I hope this it would be usefull until the guys find a solution for this problem in this component.

[agusdutra]

I was with the same problem and I found a workaround.

1- set style white-space to pre-line:

/deep/
.ui-tooltip .ui-tooltip-text {
  white-space: pre-line;
}

2- Load the tooltip value from the template component using '\n' to break line

HTML:

            <a role="button" pTooltip="{{getToolTipValue()}}"
               tooltipPosition="top" class="btn-users" >
              <span>Tooltip</span></a>

component.ts:

public getToolTipValue(): string {
    return "Line1 \n Line2 \n Line3";
  } 

Result:

[cagataycivici]

This should be fixed in recent PrimeNG release, please try with it and if the issue persists drop a comment with along with a test case based on plunkr below and we'll review again.

http://plnkr.co/edit/Wj39h1?p=preview

[TimUnderhay]

I'm afraid this still isn't working for me. Please see this plunkr:

http://plnkr.co/edit/shirXecmSnDzX6qZtW11

[TimUnderhay]

I see that this issue is still closed. I'm wondering, has anyone seen this, or should I open a new issue?

[ijaouani]

Same problem here : I try \n and br solutions.
But none works.

[xadhoom]

you may want to check the "escape" tooltip property. set it to false and use <br /> for line breaks,