javascript - why my popovers from bootstrap 5 return a Uncaught TypeError?

Question

Welcome To Ask or Share your Answers For Others

javascript - why my popovers from bootstrap 5 return a Uncaught TypeError?

asked Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - 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/[email protected]/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/[email protected]/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 ?

question from:https://stackoverflow.com/questions/65935175/why-my-popovers-from-bootstrap-5-return-a-uncaught-typeerror

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T19:06:09+0000

You are using the beta version of bootstrap 5 which doesn't require jQuery and uses its own javascript file.

To initialize bootstrap's js you have to use bs.

Replace:

data-toggle to data-bs-toggle
data-placement to data-bs-placement
data-content to data-bs-content

Your code:

<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>

Updated Code:

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

Categories

javascript - why my popovers from bootstrap 5 return a Uncaught TypeError?

javascript - why my popovers from bootstrap 5 return a Uncaught TypeError?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags