Bootstrap Snippet Bootstrap Random Quotes Tooltip Interval 10 seconds using HTML jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
   $(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); 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Random Quotes Tooltip Interval 10 seconds"
Bootstrap 4.1.1 Snippet by jstainbrook

Related: See More

Questions / Comments:

"Bootstrap Random Quotes Tooltip Interval 10 seconds" Bootstrap 4.1.1 Snippet by jstainbrook

Related: See More

Questions / Comments:

"Bootstrap Random Quotes Tooltip Interval 10 seconds"
Bootstrap 4.1.1 Snippet by jstainbrook