How to initialize tooltip with popper.js and bootstrap

Question

I am using bootstrap tooltip as explained @ https://getbootstrap.com/docs/4.3/components/tooltips/

I have successfully created tooltip but tooltip is appearing un-formatted. I believe this is because the tooltip is not getting initialized. I have the code added as shown on the page below.Tried initialization code at different places on page as well.


<!-- # TBD - Make this page look like https://getbootstrap.com/docs/4.0/examples/sign-in/ -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Martious">
    <link rel="shortcut icon" href="/static/favicon.ico">
    <title>Start Your Data Science Journey Here...</title>
    <!-- Bootstrap Core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- Additional Custom Style CSS -->
    <link href="/static/css/starter-template.css" rel="stylesheet">
    <link href="/static/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
</head>

<body>

<!--

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">

-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #00aeef;">
  <a class="navbar-brand" href="/"> Martious Data Science Hub </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-link inactive">
        &nbsp
      </li>
      <!--
      <li class="nav-link inactive">
        |
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#"><i class="fa fa-minus-circle"></i> Score Card</a>
      </li>
      -->

    </ul>
    <ul class="navbar-nav navbar-right">

      <li class="nav-item active">
        <a class="nav-link" href="#">Welcome, "Test User!"<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-link inactive">
        |
      </li>
<!--
      <li class="nav-item active">
        <a class="nav-link" href="#"> <i class="fa fa-user"></i> My Profile <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#"> <i class="fa fa-user"></i> My Team <span class="sr-only">(current)</span></a>
      </li>
-->
      <li class="nav-item active">
        <a class="nav-link" href="/authorization/logout/"> <i class="fa fa-sign-out"></i> Logout <span class="sr-only">(current)</span></a>
      </li>

    </ul>

  </div>
</nav>



<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});
</script>

<div class="mx-auto" style="max-width: 70%">

    <div class="container text-center text-muted">
        <div class="container align-middle">
            <BR><BR><BR>
            <div class="display-4">Sentiment Analysis
            <!--&nbsp; <span class="text-warning"><small>&#9432;</small></span>-->
                <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" data-placement="right" title="<b>Upload a text (*.txt) file to analyze sentiment using Vader algorithm</b>">
                    <span class="oi oi-info" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>

</div>

<!-- https://www.npmjs.com/package/bs-custom-file-input -->
<script src="/static/js/bs-custom-file-input.min.js"></script>
<script>
  bsCustomFileInput.init();
</script>


<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.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

</body>
</html>

Tooltip style is not picked up as shown on bootstrap page.

Tooltip Rendered

Expected Tooltip

I cannot find what is wrong with code. Looking for help...

Move the tooltip initializating script just above the closing body tag (but after the jquery and bootstrap js scripts). This will ensure that all DOM Content is fully loaded before any changes can be made on it in your javascript scripts. Secondly the tooltip function is part of bootstrap js meaning bootstrap js will have to be loaded before the function can be called hence the need to place it after the bootstrap js and jquery scripts. Hope this helps — F KIng, Aug 03 '19 at 01:27
Thanks @Fklng - Tried your suggestion. no change in how the page is rendered. — Peter, Aug 03 '19 at 02:58

score 1 · Accepted Answer · answered Aug 03 '19 at 03:52

I was able to fix this issue by adding bootstrap import in head

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Martious">
    <link rel="shortcut icon" href="/static/favicon.ico">
    <title>Start Your Data Science Journey Here...</title>
    <!-- Bootstrap Core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- Additional Custom Style CSS -->
    <link href="/static/css/starter-template.css" rel="stylesheet">
    <link href="/static/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

This is NOT as per bootstrap recommendation (https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template), but it works.

The fix came from code described @ https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp

score 0 · Answer 2 · answered Aug 10 '22 at 18:02

I suggest you to just use the bundle Popper + Bootstrap: bootstrap.bundle.min.js or bootstrap.bundle.js. That should bypass any problem you may have with correct file order initialization. I mean, whether you place your files in header and/or body (in my case, it worked after placing the bundle at the bottom of the body, before closing the body tag).

https://getbootstrap.com/docs/5.1/components/tooltips/#overview

And remember to initialize the tooltips correctly from your local scripts:

https://getbootstrap.com/docs/5.1/components/tooltips/#example-enable-tooltips-everywhere

This Vanila JS code should be enough for that:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

By the way, I placed this code after the aforementioned bundle.

How to initialize tooltip with popper.js and bootstrap

2 Answers2