SO - 15651141

by Arun P Johny

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.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').each(function(i, v){
    var $el = $(v);
    $el.popover({
        title: 'test' + $el.data('boothnumber'), 
        content: "test", 
        placement: "right"
    });
});