CODEWITHSUNDEEP
angularbootstrap-5
Diceble
Diceble

Reputation: 807

Angular 17, bootstrap V5.3 [attr.data-bs-title] not showing tooltip

I am making an application in Angular version 17 where I want to show a tooltip. The content of the tooltip will be dynamic, this will be supplied by a @Input() into the component. While a normal static tooltip will show up just fine, the moment I try to make the content of the tooltip dynamic it won't show up anymore.

Below the code of the html file;

<!-- not working but desired -->
<span class="d-inline-block ms-2" tabindex="0" data-bs-toggle="tooltip" [attr.data-bs-title]="'toolTipText'">
  <fa-icon [icon]="faCirleInfo" *ngIf="hasToolTipTextValue"/>
</span>

<!-- working, but not desired -->
<span class="d-inline-block ms-5" tabindex="0" data-bs-toggle="tooltip" data-bs-placement='auto' data-bs-title="'Disabled tooltip'">
  <fa-icon [icon]="faCirleInfo" *ngIf="hasToolTipTextValue"/>
</span>

Below the code of the .ts file of set component

export class TextInputControlComponent implements OnInit{
@Input() labelText?: string;
@Input() toolTipText?: string;
@Input() controlId?: string;

form!: FormGroup;
hasToolTipTextValue!: Boolean;  
faCirleInfo: any;

constructor(private rootFormGroup: FormGroupDirective){}

ngOnInit(): void {
  this.form = this.rootFormGroup.form;
  this.hasToolTipTextValue = this.toolTipText !== undefined;
  this.faCirleInfo = faCircleInfo;    

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

It seems when I use a directive for data-bs-title it stops working. So data-bs-title="help" works, but [attr.data-bs-title="'help'"] won't work.

Also [attr.title]="'help'" does work, but won't take the bootstrap styling. While just doing title="help" (which is just the same thing?) does take the bootstrap styling.

Anyone encountered this problem before and maybe has a solution for this issue or has another solution for the desired result?

Upvotes: 0

Views: 962

Answers (2)

traynor
traynor

Reputation: 8717

You need to move tooltip initialization in ngAfterViewInit() hook instead, when the view is initialized:

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

stackblitz demo

Upvotes: 0

Diceble
Diceble

Reputation: 807

as @robert suggested in the comments I started using https://ng-bootstrap.github.io/#/home for this functionality and this works.

Upvotes: 0

Related Questions