【问题标题】:Tooltip: ngbTooltip doesn't accept a new line工具提示:ngbTooltip 不接受新行
【发布时间】:2019-12-02 12:45:26
【问题描述】:

我想在我的工具提示中添加一个换行符,但它不起作用,我尝试了 \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>

【问题讨论】:

标签: angular


【解决方案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 将是

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

explanation found here for flex css

【讨论】:

  • 示例需要更新,因为您使用 打开但使用 关闭
  • 别担心,乐于助人:-)
猜你喜欢
  • 2011-09-24
  • 1970-01-01
  • 2011-10-02
  • 1970-01-01
  • 1970-01-01
  • 2015-12-26
  • 1970-01-01
  • 2014-12-10
  • 1970-01-01
相关资源
最近更新 更多