akrawchyk/random bootstrap popover content

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