Mustache.js - JSON items not rendering - javascript

This is my first look at mustache.js in anticipation of using it for a larger project.
The problem I have is the spreadsheet JSON output I plan to use on my larger project doesn't have a name for the array. So based on the tutorial I followed on Lynda.com, ideally my array data would be called "fruits" but as you can see from my JSON data below, it outputs with no name for the array, just [].
https://api.myjson.com/bins/czrxt
https://docs.google.com/spreadsheets/d/1KIg84G9CXErw2bWhkEHWUkOI4CR-biFeLqCtdypaLU8/edit?usp=sharing
How can I render my set of data in mustache.js if there is no array name that can be used to output the template?
<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="">
<title>Mustache Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/thumbnail-gallery.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<!--
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
-->
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<h1 class="my-4 text-center text-lg-left">Fruits/h1>
<div id="fruitfeed" class="row text-center text-lg-left"></div>
<script id="fruittpl" type="text/template">
{{#fruits}}
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="{{image}}" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="{{wiki}}" alt="">
</a>
</div>
{{/fruits}}
</script>
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © 2017</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core Javascript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Mustache.js -->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('https://api.myjson.com/bins/czrxt', function(data) {
var template = $('#fruittpl').html();
var html = Mustache.to_html(template, {fruits:data});
$('#fruitfeed').html(html);
}); //getJSON
}); //function
</script>
</body>
</html>


I see three issues in your code:
The href in your template should be href="{{{wiki}}}". Note that the
3 curly brackets prevent the forward slashes and other special
characters in the URL from being encoded (e.g. "/" -> "%2f").
The src parameter in the template should be src="{{{image}}}"
As mentioned previously, pass {fruits:data} as the second parameter to
the Mustache.to_html function.
The revised code is:
<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="">
<title>Mustache Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/thumbnail-gallery.css" rel="stylesheet">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<!--
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
-->
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<h1 class="my-4 text-center text-lg-left">Fruits/h1>
<div id="fruitfeed" class="row text-center text-lg-left"></div>
<script id="fruittpl" type="text/template">
{{#fruits}}
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="{{wiki}}" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="{{image}}" alt="">
</a>
</div>
{{/fruits}}
</script>
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © 2017</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core Javascript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Mustache.js -->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('https://api.myjson.com/bins/czrxt', function(data) {
var template = $('#fruittpl').html();
var html = Mustache.to_html(template, {fruits:data});
$('#fruitfeed').html(html);
}); //getJSON
}); //function
</script>

Related

Navbar button not working on small devices

so basically when I try to open my website on a small device, I have the bootstrap navbar set to collapse but the button does not work. I would highly appreciate some help. Everything else is working but this is the one thing I can't get to work. I've tried everything I could think of.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressions</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav id="navbar" class="navbar fixed-top navbar-custom navbar-expand-sm">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto mr-auto">
<li class="nav-item">
<a class="nav-link py-1 d-none d-md-inline-block active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-none d-md-inline-block" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-none d-md-inline-block" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-none d-md-inline-block" href="#about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="index.js"charset="UTF-8"></script>
</body>
</html>

it is probably due to d-none class which is an abreviation for display: none;.
Change it to display: flex; for example. You may refer to the documentation of flexbox to get more info.
Best.

Your menu items are not showing due to the d-none class
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressions</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav id="navbar" class="navbar fixed-top navbar-custom navbar-expand-sm">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto mr-auto">
<li class="nav-item">
<a class="nav-link py-1 d-md-inline-block active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-md-inline-block" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-md-inline-block" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-md-inline-block" href="#about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="index.js"charset="UTF-8"></script>
</body>
</html>

Bootstrap 4 Navbar Scrollsy ERRORs

I have a Django Landing page + few extra description pages.
I store the navbar with bootstrap 4 scrollspy in the base.html file what points on IDs on the home.html.
When I am on the home page it works like in the official bootstarp example.
1.ERROR
But when I go to other pages it just puts this URL out "http://127.0.0.1:8000/home/services/#pricing" and stay under the "http://127.0.0.1:8000/home/services/" URL.
I get a terminal ERROR message as well:
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[13/Jan/2020 16:16:35] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509
I have seen:
Bootstrap scrollspy when accessing from another page but this is bootstrap 3
and Twitter Bootstrap Scrollspy not working at all and this one is some very old version of bootstrap (+6 years ago)
2.ERROR
In the original example the navbar area where it send the user is highlighted. Mine not highlighted at all.
3. ERROR
The navbar not stay on the top when I scroll or go to any of the navbar elements by clicking on them.
If I implement any of the following than it covers the first few lines of the page.
To keep the navbar above these lines I use <div class="godown-60" id="godown"></div> lien of code.
I have tried class=" ":
Fixed navbar
fixed-top
sticky-top
base.html
<body>
<header>
<nav id="navbar-example2" class="navbar navbar-static-top navbar-light bg-light">
<a class="navbar-brand" href="{% url 'home' %}" > HOME PAGE </a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</nav>
...
home.html
<body>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
<h4 id="about">About</h4>
AboutTest
<p>...</p>
<h4 id="services">Services</h4>
ServicesTest
<p>...</p>
<h4 id="pricing">Pricing</h4>
PricingTest
<p>...</p>
</div>
...

This example have solved ERROR 1 and 3 (2 wasn't that important)
https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/#
ERROR 1 solution, bey using specified address (these can be actual URL's on the site or libraries as well)
href="home/help/#main"
<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="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Fixed top navbar example for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-top-fixed.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="home/help/#main">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- this solves ERROR 3 -->
<!-- having a separated section -->
<main role="main" class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</div>
</main>
<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>

How to make a swipe navigation drawer with Material

I am making an android app with the Webview technique. To make a look and feel like an android I am using a Material CSS (https://daemonite.github.io/material/) framework.
Now my problem is the drawer is not touch-sensitive. I can't push it back like an android drawer. The drawer can only close by touching outside of this. Please solve the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">
<title>Material</title>
<!-- CSS -->
<!-- Add Material font (Roboto) and Material icon as needed -->
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Add Material CSS, replace Bootstrap CSS -->
<link href="/material/css/material.min.css" rel="stylesheet">
<!-- Additional CSS for documentation site -->
<link href="/material/docs/css/docs.min.css" rel="stylesheet">
</head>
<body class="bg-light h-100">
<header class="navbar navbar-dark navbar-full bg-primary doc-navbar-default">
<button aria-controls="navdrawerDefault" aria-expanded="false" aria-label="Toggle Navdrawer" class="navbar-toggler" data-target="#navdrawerDefault" data-toggle="navdrawer"><span class="navbar-toggler-icon"></span></button>
<span class="navbar-brand mr-auto">Navdrawer</span>
</header>
<div aria-hidden="true" class="navdrawer" id="navdrawerDefault" tabindex="-1">
<div class="navdrawer-content">
<div class="navdrawer-header">
<a class="navbar-brand px-0" href="javascript:void(0)">Navdrawer header</a>
</div>
<nav class="navdrawer-nav">
<a class="nav-item nav-link active" href="javascript:void(0)">Active</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
<a class="nav-item nav-link" href="javascript:void(0)">Link</a>
</nav>
<div class="navdrawer-divider"></div>
<p class="navdrawer-subheader">Navdrawer subheader</p>
<ul class="navdrawer-nav">
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0)"><i class="material-icons mr-3">alarm_on</i> Active with icon</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)"><i class="material-icons mr-3">alarm_off</i> Disabled with icon</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="material-icons mr-3">link</i> Link with icon</a>
</li>
</ul>
</div>
</div>
<!-- JavaScript -->
<script crossorigin="anonymous" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- Add Material JavaScript on top of Bootstrap JavaScript -->
<script src="/material/js/material.min.js"></script>
</body>
</html>

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
<!-- <span class="text-warning"><small>ⓘ</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...

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

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 get on click button to load the nav tab page at the top rather than in the middle?

I have a click event that goes to a Bootstrap Nav Tab. When I click the button it goes to the tab page but is halfway down. I'm trying to have it when a user clicks on the button they start at the top of the page rather than halfway through it. I have tried a couple things but I can't seem to get it to work. Any help would be appreciated!
$('#gotonew').click(function(){
$('a[href="#whatsNew"]').click();
console.log($('a[href="#whatsNew"]').text() + ' click triggered');
});
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body id="learn">
<!-- Nav Bar -->
<nav class="navbar navbar-nav fixed-top fixed-top-1 navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse1 navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
<!-- container -->
</nav>
<!--First set of Nav Tabs-->
<nav class="navbar navbar-expand bg-inverse navbar-inverse fixed-top fixed-top-2">
<div class="container-fluid">
<div class="navbar-collapse collapse justify-content-left" id="navbar2">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active2" href="#overview" role="tab" data-toggle="tab">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gettingStarted" role="tab" data-toggle="tab">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#whatsNew" role="tab" data-toggle="tab">What's New</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Tab panes -->
<section id="subNavPanes">
<div class="tab-content">
<div role="tabpanel" class="tab-pane show fade active" id="overview">
<header>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container">
<div class="jumbotron">
<div class="row">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<!---Button I want to Link to What's New Tab-->
<p class="text-center"><button id="gotonew" class="btn btn-primary">See all the new features</button></p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>footer</p>
</footer>
<!--The Nav Tab Page I'm trying to link to from the Overview Tab-->
<div role="tabpanel" class="tab-pane fade in" id="whatsNew">
<header>
<div class="container">
<div class="jumbotron">
<div class="row">
</div>
</div>
</div>
</header>
<section id="section6" class="d-none d-md-block">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center bhoechie-tab-container">
<div class="row">
<div class="col-md-3 bhoechie-tab-menu">
<div class="list-group .d-sm-block">
<a href="#stepOne" class="list-group-item active text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepTwo" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepThree" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepFour" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepFive" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepSix" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
</div>
</div>
<div class="col-md-9 bhoechie-tab text-center">
<!-- flight section -->
<div id="stepOne" class="bhoechie-tab-content active">
<img class="img-fluid " src="" alt="picture">
<div class="tab-text">
<h3>...</h3>
<p>...</p>
</div>
</div>
<!-- train section -->
<div id="stepTwo" class="bhoechie-tab-content">
<img class="img-fluid" src="" alt="figure10">
<div class="tab-text">
<h3>...</h3>
<p>....</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<p>footer...</p>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
</body>
</html>

I figured out a solution.
`$('#gotonew').click(function(){
$('a[href="#whatsNew"]').click();
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
console.log($('a[href="#whatsNew"]').text() + ' click triggered');
});`

Categories