JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-tooltip.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-popover.js"></script>
<ul id="booths-container">
	<li class="booth" data-boothnumber="1" data-boothtype="prime" style="left: 180px; top: 500px;">1</li>
	<li class="booth" data-boothnumber="2" data-boothtype="center" style="left: 210px; top: 500px;">2</li>
	<li class="booth" data-boothnumber="3" data-boothtype="prime" style="left: 240px; top: 500px;">3</li>
</ul>

CSS

#booths-container { width: 600px; height: 600px; position: relative; margin: 0 auto;}
	.booth { position: absolute; list-style: none; margin: 0px; padding: 0px; border: solid 1px #fff; box-sizing: border-box; font-size: 9px; cursor: pointer; opacity: .8; border-radius: 5px; }
	.booth:hover { opacity: 1; }
	[data-boothtype="prime"],[data-boothtype="center"] { width: 30px; height: 30px; }
	[data-boothtype="prime"] { background: #fbb040;}
	[data-boothtype="center"] { background: #8dc63f;}

JavaScript

/* 
 *   when clicked instead of testundefined, it should be test[listboothnumber] i.e. test1 
 *   something wrong with this: $(this).data('boothnumber')
 */

$('.booth').popover({title: 'test' + $(this).data('boothnumber'), content: "test", placement: "right"});