Bootstrap Popover Html

by Annie Lagang

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div style="width: 60%; height: 600px; padding: 100px 300px;">
		<div class="actions">
			<!-- Action Share -->
			<div class="popup-window" data-placement='left'>
				<i title='Share' class="btn-popup fa fa-share-alt"></i>
			</div>
			<div class="popup-content hide">
				<div class="socialShare">
					<label class="form-group">Share:</label>
					<div class="well">
						<a title="Share on twiiter" target="_blank" href="#">
							<i style="font-size: 40px;" class="fa fa-twitter-square"></i>
						</a>
						<a title="Share on facebook" target="_blank" href="#">
							<i style="font-size: 40px;" class="fa fa-facebook-square"></i>
						</a>
					</div>
				</div>
			</div>

			<!-- Action Respond To Review -->
			<div class="popup-window" data-placement='bottom'>
				<i  title='Respond To Review' class="btn-popup fa fa-share-square-o"></i>
			</div>
			<div class="popup-content hide">
				<div class="">
					<label class="form-group">Respond To Review:</label>
					<div class="form-group">
						<textarea class="form-control">Great song BRO!</textarea>
					</div>
					<div class="form-group">
            <button type="button" class="btn btn-white cancel"><i class="fa fa-times"></i>&nbsp;&nbsp;Close</button>
						<!--<button class="btn btn-primary respondToReview width100" onclick="alert('Thanks');$('.popup-window').popover('hide');">Post Response</button>-->
            <button class="btn btn-primary respondToReview width100"onclick="$('.alert').show();">Post Response</button>
					</div>
				</div>
			</div>
		</div>
	</div>

<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        ...

CSS

.popover {
        width: 300px;
        height: 200px;
        max-width: 100%;
 }

/* these style are for the buttons design only. it has nothing to do with the style of the popover.*/
.actions .popover-content {
	padding: 20px 40px;
}
.actions .popup-window,
.action-link {
	display: inline-block;
	margin-right: 5px;
	line-height: 20px;
	border-radius: 5px;
	padding: 7px;
	width: 34px;
	height: 34px;
	background-color: #2fa0e5;
	color: #fff;
	cursor: pointer;
}
.actions .popup-window:hover,
.actions .popup-window:focus,
.action-link:hover,
.action-link:focus {
	opacity: 0.85;
}
.action-link:last-child,
.actions .popup-window:last-child {
	margin-right: 0;
}
.btn-popup.fa {
	font-size: 20px;
	cursor: pointer;
}
.actions .popover-title {
	background-color: transparent;
	border-color: transparent;
	float: right;
}
.actions .popover-content .form-group:first-child {
	margin-top: 10px;
}
.actions .popover-content .well {
	background-color: transparent;
	border-color: transparent;
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	box-shadow: none;
}
.actions .popover-content .well a {
	margin: 0 10px 0 0;
}

JavaScript

// DEMO: http://olgayellowflowers.github.io/code/html-bootstrap-popover/
// SOURCE:  http://stackoverflow.com/a/33647517/906815

$(function(){
		$('.alert').hide();
    $('.popup-window').popover({
	    html: true,
	    title : '<button type="button" class="close" onclick="$(&quot;.popup-window&quot;).popover(&quot;hide&quot;);">&times;</button>',
	    trigger: 'manual',
	    content: function () {
	        return $(this).next('.popup-content').html();
	    }
	}).click(function(e) {
	    $(this).popover('toggle');
		$('.popup-window').not(this).popover('hide');

	    e.stopPropagation();
	});

  // SOURCE: http://stackoverflow.com/a/19891503/906815
	$('.popup-window').on('shown.bs.popover', function () {
  		var popup = $(this);
      $(this).next('.popover').find('button.cancel').click(function (e) {
      		popup.popover('hide');
      });
  });

	$('body').on('click', function (e) {
	    $('.popup-window').each(function () {
	        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
	            $(this).popover('hide');
	        }
	    });
	});
});