0

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>
Dokksen
  • 372
  • 1
  • 4
  • 17
Sangram Badi
  • 4,054
  • 9
  • 45
  • 78

1 Answers1

0

You need to add jQuery in order to make Bootstrap work properly. Try adding jQuery before bootstrap javascript.

Salman Ullah Khan
  • 730
  • 10
  • 29