why my popovers from bootstrap 5 return a Uncaught TypeError?

I want to use Bootstrap 5 popovers in my Angular app.

Here’s what I do:

my index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>my website</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  <script>
    var popover = new bootstrap.Popover(document.querySelector('.popoverable'), {
      container: 'body'
    })
  </script>
</body>
</html>

app.component.html

<button type="button" class="btn btn-secondary popoverable" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>

Then on my page I see my styled button, but the popover doesn’t appear and in the console I get a Uncaught TypeError: this._element is undefined.

Does anybody have a solution to my issue ?

57 thoughts on “why my popovers from bootstrap 5 return a Uncaught TypeError?”

  1. First of all I want to say fantastic blog! I had a quick question in which I’d like
    to ask if you don’t mind. I was curious to find
    out how you center yourself and clear your mind prior to writing.
    I’ve had a tough time clearing my thoughts in getting my thoughts out.
    I truly do take pleasure in writing but it just seems like the first 10 to 15 minutes are
    wasted simply just trying to figure out how to begin.
    Any ideas or tips? Appreciate it! http://cleckleyfloors.com/

    Reply