How to use Popper.js with Bootstrap 4 beta

user_111665 0
Viewed 50435

I'm old school, so I downloaded the source code to 1.12.0 and then did the following:

<script src="/popper.js-1.12.0/dist/popper.js"></script>
<script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script>

But I'm getting:

Uncaught SyntaxError: Unexpected token export

on line 2294 where it says: 

export default Popper;
bootstrap-4 popper.js
8 Answers

I had the same problem. Tried different approaches, but this one worked for me. Read the instruction from http://getbootstrap.com/.

Copy the CDN links (jQuery, Popper and Bootstrap) in same order (it is important) as given.

Bootstrap CDN links

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
user_24106430

Just use bootstrap's bundle version and your good!

<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<!-- <script src="./node_modules/popper.js/dist/popper.min.js"></script> -->
<!-- <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
user_49816770

As per Fez Vrasta.

If retrieving popper through NuGet Package Manager within Visual Studio make sure your popper.js script reference path is using the umd folder:

MVC ASP.Net BundleConfig example:

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/umd/popper.js", //path with umd
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

Direct script reference example:

<script src="~/Scripts/umd/popper.js" type="text/javascript"></script>
user_27861060

Separate Containers:

If you followed the accepted answer and your tool-tips are still in the wrong place, it might be because you have a different container for each tool-tip.

I would try this to allow the tool-tip to be placed near the parent of the element:

const initializeTooltips = function () {
    $('[data-toggle="tooltip"]').each(function() {
        $(this).tooltip({container: $(this).parent()});
    });
};
$(document).ready(function () {
    initializeTooltips();
});

Try It yourself on jsfiddle.

user_80716180
Related