Question 413103 in Html Question posted in
Some basic documentation can be found here.

Html – After Bootstrap 5 tooltip not working in Angular 11 project

Facing issue with bootstrap popover and tooltip to display the HTML content.

<button type="button" data-bs-toggle="popover" data-bs-html="true" data-bs-content=   {{item.HtmlDescription}} title={{item.HtmlDescription}}>
    Toggle popover`your text`
</button>

Title property content as mentioned below

<h3>My Community Resident (DCR)</h3>
Looking Criteria for this target group:
<ul>
    <li>Age 18 to 39 years old, AND</li>
    <li>Resides within one of the country designated:
        <ul>
            <li>Rural Area, OR</li>
            <li>Silent Zone</li>
        </ul>
    </li>
</ul>
Tags:

2

Answers


  1. 0

    You are creating a popover and not a tooltip.

    You should initialize the popups using this code.

    When working with Angular and bootstrap you could try ng-bootstrap, which takes away the complexity of using it with angular.

    TS:

    ngOnInit() {
  const popoverTriggerList: any = document.querySelectorAll(
    '[data-bs-toggle="popover"]'
  );
  const popoverList = [...popoverTriggerList].map(
    (popoverTriggerEl) => new window['bootstrap'].Popover(popoverTriggerEl)
  );
}

    HTML:

    <button
  type="button"
  data-bs-toggle="popover"
  data-bs-html="true"
  class="btn btn-secondary"
  [attr.data-bs-content]="htmlStr"
>
  Toggle popover`your text`
</button>

    Stackblitz Demo

    Login or Signup to reply.
  2. 0

    The popover and the tooltip should be a new Popover or a new Tooltip.

    If you add "types/boostrap"

    npm i @types/bootstrap

    You can use a directive in the way

    import { Popover } from 'bootstrap'; //<--don't forget import boostrap

@Directive({
  selector: '[data-bs-toggle="popover"]',
  standalone: true,
})
export class PopOverTipDirective {
  constructor(elementRef: ElementRef) {
    const tool = new Popover(elementRef.nativeElement);
  }
}

    Now you can use

    <button type="button" class="btn btn-lg btn-danger" 
   data-bs-toggle="popover" 
   title="Popover title" 
  data-bs-content="And here's some amazing content....">
  Click to toggle popover
</button>

    In this stackblitz I use in angular way some diferents components in bootstrap 5 with Angular 18

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search