Sandbox::https://github.com/charite/charite.github.io/blob/master/tooltip

Repository navigation

History

<html>

<head>

<title> Tooltip Demo</title>

$(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 tooltips.json is. to demonstrate pulling from another site, I uploaded

the tooltips.json file to another domain and enabled CORS in that domain. If you don't enable CORS on the server where the JSON file resides, developers calling the file will get errors.

var url = "http://idratherbetellingstories.com/wp-content/apidemos/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.id == "basketball") {

$( "#basketball" ).attr( "data-content", page.body );

}

if (page.id == "baseball") {

$( "#baseball" ).attr( "data-content", page.body );

}

if (page.id == "football") {

$( "#football" ).attr( "data-content", page.body );

}

if (page.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 the theme so you can see the bare minimum code to add to a page.</p>

<p>Content in the tooltips (actually "popovers" according to Bootstrap lingo) is pulled in dynamically from another file on another domain here: <a href="http://idratherbetellingstories.com/wp-content/apidemos/tooltips.json">http://idratherbetellingstories.com/wp-content/apidemos/tooltips.json</a>. </p>

<p>I could have simply pulled it from the tooltips.json file in this theme, but I wanted to simulate serving up the data file from a remote site, like you might do with a UI.</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>

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

Navigation Menu

Repository navigation

tooltip_demo.html

tooltip_demo.html

FilesExpand file tree

tooltip_demo.html

Latest commit

History

tooltip_demo.html

File metadata and controls