How to use Popper.js with Bootstrap 4 beta
Bootstrap 4popper.jsBootstrap 4 Problem Overview
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 Solutions
Solution 1 - Bootstrap 4
You want to use the dist target specified in the package.json file as main entry.
In this case, you are looking for the umd build (dist/umd/popper.js)
What's UMD?
> The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others). In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility.
This means that an UMD bundle can be loaded via <script> tag and get injected inside the global scope (window), but also work if required with a CommonJS loader such as RequireJS.
Solution 2 - Bootstrap 4
Popper requires that you use the file under the umd path with Bootstrap 4.
Either of these CDN versions will work:
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js
Other answers/comments mention the version, however the problem is not related to versioning.
It's never a bad practice to use Bootstrap's example of including popper because it should always work. Bootstrap 4 as of now recommends popper 1.11 which is a safe choice, however version 1.12.5 should work fine as well.
Side note: Why the confusion with umd, esm, and plain ol' popper files? The intention is flexible module packaging, but in reality it could be made simpler. This post explains some of the issues with new module types.
Solution 3 - Bootstrap 4
Make sure you use the Popper.js version referenced in the Bootstrap docs.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
Solution 4 - Bootstrap 4
As per the popper docs:
> Popper.js is currently shipped with 3 targets in mind: UMD, ESM and > ESNext. > > UMD - Universal Module Definition: AMD, RequireJS and globals; > > ESM - ES Modules: For webpack/Rollup or browser supporting the spec; > > ESNext: Available in dist/, can be used with webpack and > babel-preset-env; Make sure to use the right one for your needs. If > you want to import it with a
Solution 5 - Bootstrap 4
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.
<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>
Solution 6 - Bootstrap 4
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>
Solution 7 - Bootstrap 4
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>
Solution 8 - Bootstrap 4
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.