CODEWITHSUNDEEP
angular
bxxb
bxxb

Reputation: 804

Tooltip: ngbTooltip doesn't accept a new line

I want to add a line break inside my tool tip but it's not working, i tried everything from \n, <br>, &013;/ &#13

Here is my code:

<a>
 <img class="rounded-circle d-inline-block" src="{{content.image}}"  
 triggers="click" [autoClose]="true" ngbTooltip="{{content.email}} <br> 
 {{content.tel}}">
</a>

Upvotes: 13

Views: 8067

Answers (2)

michal.jakubeczy
michal.jakubeczy

Reputation: 9469

In case you need only line breaks and no other HTML formatting you can use \n as a line break and apply white-space: pre-line; css property to tooltip.

Observe concatenating email and tel with \n and using tooltipClass to apply white-space: pre-line

<img 
  class="rounded-circle d-inline-block" 
  src="{{content.image}}"  
  triggers="click" 
  [autoClose]="true" 
  ngbTooltip="{{content.email + '\n' + content.tel }}" 
  tooltipClass="white-space-pre-line">

and define CSS class

.white-space-pre-line {
  white-space: pre-line;
}

Upvotes: 0

dev-dan
dev-dan

Reputation: 6283

You could use ng-template here and it would look like below. This should give you the list effect you are looking for. This is what I opted for and worked well.

Angular docs

<ng-template #list>
    <div class="d-flex flex-column">
      <span>{{ content.email}}</span>
      <span>{{ content.tel}}</span>
    </div>
</ng-template>


 <img class="rounded-circle d-inline-block" src="{{content.image}}"  
 triggers="click" [autoClose]="true" [ngbTooltip]="list">

Normal css for class="d-flex flex-column" outside of bootstrap would be

.example {
    display: flex;
    flex-direction: column;
}

explanation found here for flex css

Upvotes: 20

Related Questions