CODEWITHSUNDEEP
ng2-bootstrap
Karen Chen
Karen Chen

Reputation: 31

ng2-bootstrap tooltip content line break at a certain position

How do I put line break especially between {{UpdateTime}} and {{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;
}

It breaks within the tooltip box, but not in the right place, I need to have a line break right after {{UpdateTime}}, align in two lines.

Thanks!

Upvotes: 3

Views: 2002

Answers (2)

Joel Brighton
Joel Brighton

Reputation: 101

As of (at least) 1.3.3 tooltipHtml no longer works. Instead use a template reference.

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

Upvotes: 2

Karen Chen
Karen Chen

Reputation: 31

I figured out how to do it. Use tooltipHtml property instead of tooltip, and insert <br/> between the two values will do!

Upvotes: 0

Related Questions