<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Must include following links for this to work - doesn't work with out popper loaded BEFORE bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<div class="container">
<div class="row">
<h2>Bootstrap - Random Quotes/Hints Tooltip</h2>
This is just a little code snippet for an auto updating help link/button using bootstrap, jquery and popper
</div>
<div class="row mt-4">
<button class="btn btn-link" data-toggle="tooltip" data-placement="top" id="hints" title='Test Tooltip - will change every 10 seconds'><i class="fa fa-question-circle"></i> Hover over me for a Hint!</button></div>
</div>
</div>
$(document).ready(function(){
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
});
// I would import this from a file or pull this array from a db -- this is just a demo
var quotes = new Array("This is a test tool-tip","More testing", "Blah Blah Blah", "can import from csv text file for this", "Text Text TESTING Text");
var randno = quotes[Math.floor( Math.random() * quotes.length )];
$("#hints").attr('data-original-title', randno);
function updateHints(){
newquote = quotes[Math.floor( Math.random() * quotes.length )];
$("#hints").attr('data-original-title', newquote);
$("#hints").tooltip();
// uncomment to have tooltips show up automatically every 10 seconds
//$("#hints").mouseover();
}
//Interval is set to 10 seconds; 1000 - 1 second
setInterval(updateHints, 10000);
