Skip to content

Instantly share code, notes, and snippets.

@vfulco

vfulco/popover.html

Created March 5, 2013 01:03
Show Gist options
  • Save vfulco/5087165 to your computer and use it in GitHub Desktop.
Save vfulco/5087165 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
popover.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-twipsy.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-popover.js"></script>
<!-- Le styles -->
<link href="http://www.localgyi.com/style/bootstrap.css" rel="stylesheet">
<body >
<!-- Popovers id="bootstrap-js"
================================================== -->
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<section id="popover">
<div class="page-header">
<h1>Popovers <small>bootstrap-popover.js</small></h1>
</div>
<div class="row">
<div class="span4 columns">
<p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p>
<p><span class="label notice">Notice</span> You must include the bootstrap-twipsy.js file <strong>before</strong> bootstrap-popover.js.</p>
<a href="1.4.0/bootstrap-popover.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span12 columns">
<h3>Using bootstrap-popover.js</h3>
<a href="#" class="btn danger" rel="popover" data-html='true' data-placement='above' data-content='&lt;img src="http://www.gettyimages.com/images/marketing/editorial/contour/cnr_top.gif"&gt;' data-original-title="A very very very very very very very long title">hover for popover</a>
<script>
$(function () {
$("a[rel=popover]")
.popover({
html: true,
placement: 'above',
delayOut: 90000
})
.click(function(e) {
e.preventDefault()
})
})
</script>
</div>
</div>
</section>
<br/><br/><br/><br />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment