1

I'm using a directive to show a tooltip text:

<i class="fas fa-info-circle" [nz-tooltip]='infoBulleContent'  nzTooltipPlacement='topRight'></i>

in ts code, this.infoBulleContent = 'Some text \n some text'; but the \n is not working, i used also the br tag, same result!

any help please

0

2 Answers 2

3

This won't work, alas. As you can see in the source of this tooltip component, the title that you give is not parsed but directly included as a string in the template.

Having said that, what you probably want here is to pass a TemplateRef, which allows you to include multiple lines, but also styling (which is preferable over using manual br-line breaks). E.g.

    <!-- Element that should have a tooltip -->
    <button nz-tooltip [nzTooltipTitle]="titleTemplate">Test</button>

    <!-- Contents of tooltip -->
    <ng-template #titleTemplate>
      <p style="font-size: 25px">Your <br> tooltip</p>
    </ng-template>
Sign up to request clarification or add additional context in comments.

Comments

0

\n does not cause a line break in html. You'll need to use a <br/> or wrap your text in a block element.

this.Values += this.Id + ',' + this.status + '<br/>';

or

this.Values += '<div>' + this.Id + ',' + this.status + '</div>';

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.