Bootstrap tooltip doesn't show style of the tooltip, only data

Question

Trying to make Bootstrap show the tooltip function, I have followed exactly as Bootstrap DOC about Tooltips and declare my attribute and properties. when I hover over the text t

Answer 1

The OP described precisely the issue I was seeing in Angular 8 with Bootstrap 4.4.1 using JQuery 3.4.1 and not using ng-bootstrap or ngx-bootstrap. The image in the OP is bang on.

Some of the answers were sort of helpful while missing the key point that if the DIV is wrapped in an *ngIf it is difficult to get tooltip() to see that the DIV should have a listener attached to it for mouseenter / mouseleave events. Doing this as the document loads the first time is useless for a single page application where the content is dynamically added and removed.

The critical answer turned up https://github.com/twbs/bootstrap/issues/4215 and codepen https://codepen.io/Johann-S/pen/djJYPb . For me the fix was ...

app.component.ts ... just once in this one file is enough

import { Component } from '@angular/core'
declare var $: any
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.sass']
})
export class AppComponent {
    constructor(){
        $('body').tooltip({
            selector: '[data-toggle="tooltip"]'
        })
    }
}

and in every place the tooltip should be seen (component.html files for me).

Binding to the body allows the tooltip selector to see the addition of any 'new' DOM elements irrespective of the timing.

As to the performance hit ... not sure yet :D, though it is mercifully light on typing.