I'm trying to include Bootstrap 4 within my Spring Boot project, but I'm seeing the error: Bootstrap tooltips require Popper.js

So I included the dependency:

<dependency>
  <groupId>org.webjars.npm</groupId>
  <artifactId>popper.js</artifactId>
  <version>1.13.0</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.32-1</version>
</dependency>

But when I include it inside the page I can' find the the popper.js . Why?

This is what I used:

<script th:src="@{/webjars/npm/popper.js/popper.min.js}" type="text/javascript"></script>

What is the correct path to include it?

EDIT:

Same problem with font-awesome:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>5.0.2</version>
</dependency>

and

<link rel="stylesheet" th:href="@{/webjars/font-awesome/dist/font-awesome.min.css}" />

I'm trying to include Bootstrap 4 within my Spring Boot project, but I'm seeing the error: Bootstrap tooltips require Popper.js

So I included the dependency:

<dependency>
  <groupId>org.webjars.npm</groupId>
  <artifactId>popper.js</artifactId>
  <version>1.13.0</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.32-1</version>
</dependency>

But when I include it inside the page I can' find the the popper.js . Why?

This is what I used:

<script th:src="@{/webjars/npm/popper.js/popper.min.js}" type="text/javascript"></script>

What is the correct path to include it?

EDIT:

Same problem with font-awesome:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>5.0.2</version>
</dependency>

and

<link rel="stylesheet" th:href="@{/webjars/font-awesome/dist/font-awesome.min.css}" />

• javascript
• java
• spring
• spring-boot
• webjars

3 Answers 3

When I loaded that library into my workspace, it indicates this path: META-INF/resources/webjars/popper.js/1.13.0/dist. So try it:

1. without /npm in path
2. with version number

3. with dist folder

   <script th:src="@{/webjars/popper.js/1.13.0/dist/popper.min.js}" type="text/javascript"></script>
   

EDIT: (Reaction on ment)

Font awesome JAR has a lot of different folders in WebJAR distribution. Look at my IJ screenshot:

So for highlighted file in screenshot, you would use

 <link rel="stylesheet" th:href="@{/webjars/font-awesome/5.0.2/svg-with-js/css/fa-svg-with-js.css}" />

Hope that after whowing the screenshot you understand how these webjar folders work. WebJAR just adds bunch of UI resources to your WEB-INF/resources folder and you need to figure out correct path from your workspace.

In case of eclipse / sts i added dependency like following in pom.xml

    <!-- bootstrap and jquery -->
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>3.3.7</version>
    </dependency>
    <dependency>
         <groupId>org.webjars</groupId>
         <artifactId>jquery</artifactId>
         <version>3.2.1</version>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>popper.js</artifactId>
        <version>2.0.2</version>
    </dependency>
    

and then in html template i added url by going through maven dependency file structure inside

popper.js-2.0.2.jar->META-INF->resources->webjars->popper.js->2.0.2->umd->popper.js

so path i have added as following

<script src="webjars/popper.js/2.0.2/umd/popper.js"></script>

similarly we can add proper path for webjar dependency following is screenshot for reference

If you're using the latest bootstrap (5.3.x) webjar in your pom:

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator</artifactId>
            <version>0.52</version>
        </dependency>

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>5.3.3</version> <!-- Replace with the latest version if necessary -->
        </dependency>

And you can access it in your HTML file via:

    <!--/* Bootstrap JS (includes popper for tooltips) */-->
    <script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.bundle.min.js"></script>

This will use the bootstrap bundle which includes popper.js

Change to just bootstrap.min.js if you don't want the bundle stuff.