ng2-bootstrap tooltip Inhalt Zeilenumbruch an einer bestimmten Position

Question

Wie setze ich Zeilenumbrüche speziell zwischen {{UpdateTime}} und {{RawValue}} in ng2-bootstrap tooltip?

html:

<span tooltipPlacement="bottom" tooltipClass="customClass" tooltip="{{UpdateTime}} {{RawValue}}">{{DisplayName }}</span> 

css:

.tooltip.customClass .tooltip-inner { 
    -ms-word-break: break-word; 
    word-break: break-word;  
    text-align: center; 
    border:1px; 
    border-style:solid; 
    border-color:black; 
    background-color: lightgray; 
    color: black; 
} 

Es bricht im Tooltip-Box, aber nicht an der richtigen Stelle, ich brauche einen Zeilenumbruch haben direkt nach dem {{Update}} , in zwei Zeilen ausrichten.

Danke!

Answer 1

Ich habe herausgefunden, wie es geht. Verwenden Sie die TooltipHtml-Eigenschaft anstelle von Tooltip und fügen Sie <br/> zwischen den beiden Werten ein!

Answer 2

Ab (mindestens) 1.3.3 tooltipHtml funktioniert nicht mehr. Verwenden Sie stattdessen eine Vorlagenreferenz.

<template #statusTemplate> 
    lorem ipsum <br /> dolor sit amet 
</template> 
<div.... 
    [tooltip]="statusTemplate" 
</div>