[Bootstrap] Font Awesome Icon에 tooltip 적용 + tooltip 개행

[Font Awesome Icon에 tooltip 적용]

card-header에 font-awesome icon을 추가하고, 그 아이콘에 툴팁 기능을 넣으려고한다.

기존 코드

<h6 class="m-0 font-weight-bold text-primary">
Information <a href="#" class="fas fa-question-circle"
data-toggle="tooltip" data-placement="top" title="" data-original-title="tooltip"></a>
</h6>

html 추가 코드

 

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
 
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
})
 

js 추가 코드

적용 완료

---

[tooltip 개행]

툴팁에 개행을 하려고한다.

<br>태그나 &#10;&#13;가 안통한다.

data-html="true" 추가

<br>과같은 html코드가 적용된다.