javascripttooltippopper.js

How to initialize tooltip with popper.js and bootstrap

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...

Solution

  • 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