How to enable ngx-bootstrap tooltip on [innerHTML] from variable

user_1026716 0
Viewed 1814

I can successfully get tooltips working with ngx-bootstrap when I do for example:

<div><button tooltip="Tooltip works!">Button with a Tooltip</button></div>

But if I need to set the innerHtml of the div dynamically, say from a variable:

let content = '<button tooltip="This tooltip wont work">Button with a Tooltip</button>';

and set the innerHtml as such:

<div [innerHTML]="content"></div>

The tooltip never renders.

I'm assuming I need to do something else, but I cannot find an answer. Any help is appreciated.

ngx-bootstrap angular
1 Answers

You have to use it like below: 

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  content;
  newvalue:string ='<strong>Stackoverflow</strong> is <em>helpful!</em>';
  constructor(private sanitizer:DomSanitizer){
  }

  ngOnInit() {
    this.content = this.sanitizer.bypassSecurityTrustHtml('<button style="border:1px solid #3333">Button with a Tooltip</button>')
  }
}

https://stackblitz.com/edit/angular-jftbrm

If you use like

let content = ''; This you cant use it inside template.

user_62850540
Related