tooltips.html

---
layout: none
search: exclude
---

<html>
<head>
<title> Tooltip Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

/*Bootstrap popovers are initialized with the following script. In the options, I'm setting the placement to be on the right, the trigger to be hover rather than click, and to allow HTML from the JSON data source. */

    $('[data-toggle="popover"]').popover({
        placement : 'right',
        trigger: 'hover',
        html: true
    });

/* Set the location where mydoc_tooltips_source.json is. */
var url = "tooltips.json";

$.get( url, function( data ) {

 /* Bootstrap popover text is defined inside a data-content attribute inside an element. That's
 why I'm using attr here. If you just want to insert content on the page, use append and remove the data-content argument from the parentheses.*/

    $.each(data.entries, function(i, page) {
        if (page.doc_id == "basketball") {
            $( "#basketball" ).attr( "data-content", page.body );
        }

        if (page.doc_id == "baseball") {
            $( "#baseball" ).attr( "data-content", page.body );
        }
        if (page.doc_id == "football") {
            $( "#football" ).attr( "data-content", page.body );
        }

        if (page.doc_id == "soccer") {
            $( "#soccer" ).attr( "data-content", page.body );
        }


        });
    });


});
</script>

<style>
body {padding-left:50px;}
</style>

</head>
<body>

<h1>Tooltip Demo</h1>

<p>This page is purposely separated out from the rest of theme so you can see the bare minimum code to add to a page, without all the other theme's code getting in the way.</p>

<p>Content in the tooltips (actually "popovers" according to Bootstrap lingo) can be pulled in dynamically by placing the JSON file on a remote host. </p>

<div class="alert alert-info" role="alert"><b>Note:</b> Make sure you view the file source so you can read the notes I've added in code comments.</div>

<!-- the glyphicon class provides the info icon.-->

<p>Basketball <span class="glyphicon glyphicon-info-sign" id="basketball" data-toggle="popover"></span></p>

<p>Baseball <span class="glyphicon glyphicon-info-sign" id="baseball" data-toggle="popover"></span></p>

<p>Football <span class="glyphicon glyphicon-info-sign" id="football" data-toggle="popover"></span></p>

<p>Soccer <span class="glyphicon glyphicon-info-sign" id="soccer" data-toggle="popover"></span></p>