时间戳

首页 > 解决方案 > why bootstrap popover is not working with javascript?

javascript - why bootstrap popover is not working with javascript?

问题描述

I am trying to implement bootstrap popover using pure javascript.

I know with using jquery it is easy to achieve, but I can't use jquery in my application.

Can anyone guide me, where I need to fix?

Below is my code:

<!DOCTYPE html>
<html lang="en">
<head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container mt-3">
      <a href="javascript:void(0);" id="myPop" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" >Toggle popover</a>
    </div>

    <script>
        init();
        function init() {
            document.getElementById( 'myPop' ).style.display = 'block';
        }
    </script>

</body>
</html>

标签： javascripthtmlbootstrap-4

解决方案

您需要添加 jQuery 才能使 Bootstrap 正常工作。尝试在引导 javascript 之前添加 jQuery。

推荐阅读