почему мои всплывающие окна из bootstrap 5 возвращают Uncaught TypeError?

Question

Я хочу использовать всплывающие окна Bootstrap 5 в моем приложении Angular.

Вот что я делаю:

мой 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>

Затем на моей странице я вижу свою стилизованную кнопку, но всплывающее окно не появляется, и в консоли я получаю Uncaught TypeError: this._element is undefined.

Есть ли у кого-нибудь решение моей проблемы?

0

Похожие записи:

Добавить комментарий Отменить ответ