JSFiddle - React, Tailwind, and code Playground

by Roman Zharikov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id='box'>
  <p><button type="button" class="arrow btn btn-lg btn-danger" data-toggle="popover" title="Заголовок № 1" data-content="Какой то контент, часть 1"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button></p>

  <p><button type="button" class="arrow btn btn-lg btn-danger" data-toggle="popover" title="Заголовок № 2" data-content="Какой то контент, часть 2"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button></p>
  
   <p><button type="button" class="arrow btn btn-lg btn-danger" data-toggle="popover" title="Заголовок № 3" data-content="Какой то контент, часть 3"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button></p>
</div>

CSS

#box{
  padding:100px 0 0 100px;
}
.popover-content{
  padding:50px;
}
.line{
  text-align: right;
  padding:10px 25px 0 0;
}

JavaScript

/*
* клиентский код
*/

$(function(){

/* тут какбэ ты шаблон хуяришь общий: в доке почитаешь  */
$('.arrow').popover({trigger:"click",placement:"right",template:"<div class='popover' role='tooltip'><div class='arrow'></div><h3 class='popover-title'></h3><p class='line'><span class='glyphicon glyphicon-remove closer' aria-hidden='true'></span></p><div class='popover-content'></div></div>"});

/* обработка клика в любое место, кроме тела поповера */
$(document).mouseup(function (e){       				// событие клика по веб-документу
		var div = $(".popover"); 										// тут указываем ID элемента
		if (!div.is(e.target) 											// если клик был не по нашему блоку
		    && div.has(e.target).length === 0) { 		// и не по его дочерним элементам
			$('.arrow').popover('hide'); 							// скрываем его
		}
	});

/* тут делаем такой хук: скрываем все, но показываем текущий сразу */
$('.arrow').on('click', function(){
  $('.arrow').popover('hide');
	$(this).popover('show');
});

/* обработка текущего крестика */
$('.arrow').on('shown.bs.popover', function () {
	$(this).next().find('.closer').on('click',function(){
  	$(this).parents('.popover').prev().popover('hide');
  });
})
  
});


/*
* Тут только поповер - либа, хочешь копирни отсюда, хочешь закастомь на бутстрапе
*---------------------------------------
*/

/*!
 * Bootstrap v3.3.5 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*!
 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=7b530d6961e32209cdd4)
 * Config saved to config.json and https://gist.github.com/7b530d6961e32209cdd4
 */
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(t){"use strict";var e=t.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||1==e[0]&&9==e[1]&&e[2]<1||e[0]>2)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version...