Skip to content

Instantly share code, notes, and snippets.

@akrawchyk

akrawchyk/random bootstrap popover content

Last active January 4, 2016 04:09
Show Gist options
  • Save akrawchyk/8566346 to your computer and use it in GitHub Desktop.
Save akrawchyk/8566346 to your computer and use it in GitHub Desktop.
Download ZIP
Replacing bootstrap popover content on each click
Raw
random bootstrap popover content
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<p>
<a href="#" class="btn btn-lg btn-danger desktop-question" title="click me" role="button">Click to toggle popover</a>
</p>
</div>
</div>
</div>
<script>
var mainQuestionArray = ['first q', 'second q', 'third q'];
var $desktopQuestionPopover = $('.desktop-question');
function randomQuestion(){
return mainQuestionArray[Math.floor(Math.random()*mainQuestionArray.length)];
}
function initDesktopQuestionPopover(question) {
$desktopQuestionPopover.popover({
placement: 'bottom',
trigger: 'manual',
content: question
});
}
function questionPopover(){
initDesktopQuestionPopover(randomQuestion());
$desktopQuestionPopover.on('click', function(e) {
e.stopPropagation();
$desktopQuestionPopover.popover('show');
$(document).one('click.initializedPopover', function() {
$desktopQuestionPopover.popover('hide');
});
$desktopQuestionPopover.one('hidden.bs.popover', function() {
$desktopQuestionPopover.popover('destroy');
initDesktopQuestionPopover(randomQuestion());
});
});
}
$(function() {
questionPopover();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment