Change Bootstrap tooltip text from Angular 2 input

Question

I am using Angular 2 and Bootstrap 3 tooltip. I have a side bar in layout and a main content screen. In the side bar the user can change the tooltip text of an item in the content.

Jokes on me though because the tooltip text isn't updating. So an object is passed into my content panel with the tooltip text via @Input(). Then is data bound via [attr.title]=panel.tooltiptext.

Now if you update the tooltip text then hover over the text you see that the tooltip text wasn't updated but keep hovering and you will see vanilla html title pop up with the correct text.

Plunker example

main.component.ts - This is like my side bar, it is at a higher level than the content panel.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{desc}}</h2>

      <tooltip-comp [panel]="panelObj"></tooltip-comp> <br>

      <input [(ngModel)]="panelObj.tooltipText" style="width: 250px;" />
    </div>
  `,
})
export class App implements OnInit {
  desc:string = 'Change tooltip text';
  panelObj = {
    tooltipText: "The Power of the "
  };

  constructor() {}

  ngOnInit() {

  }
}

tooltip.component.ts - This is the content panel that gets the object with the updated tooltip text in it.

@Component({
  selector: 'tooltip-comp',
  template: `
    <div>
      <a id="blah" href="#" data-toggle="tooltip" [attr.title]="panel.tooltipText">You Don't Know</a> <br><br>
    </div>
  `,
})
export class TooltipComponent implements OnInit {
  @Input() panel: string;

  constructor() {}

  ngAfterViewInit() {
    $('[data-toggle="tooltip"]').tooltip({container: 'body', html: true});
  }

  ngOnInit() {

  }
}

Answer 1

You can use data-original-title attribute to dynamically update your tooltip.

[attr.data-original-title]="panel.tooltipText"

Modified Plunker