angular - 工具提示 : ngbTooltip doesn't accept a new line

Question

我想在我的工具提示中添加换行符，但它不起作用，我尝试了 \n 中的所有内容, <br> , &013;/ &#13
这是我的代码:

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

Answer 1

您可以使用 ng-template在这里，它看起来像下面。这应该给你你正在寻找的列表效果。这是我选择的并且效果很好。

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">

class="d-flex flex-column" 的普通 css在 bootstrap 之外将是

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

explanation found here for flex css