JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-twipsy.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-popover.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span class="popup-marker" data-content="contentX" data-original-title="title">xxxxxxx</span></p>
<p><span class="popup-marker" data-content="contentY" data-original-title="title">yyyyyyyyy</span></p>
<p><span class="popup-marker" data-content="contentZ" data-original-title="title">zzzzzzzz</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

JavaScript

var isVisible = false;
var clickedAway = false;

$('.popup-marker').each(function() {
    $(this).popover({
        html: true,
        trigger: 'manual'
    }).click(function(e) {
        $(this).popover('show');
        isVisible = true;
        //e.preventDefault();
    });
});

$(document).click(function(e) {
  if(isVisible & clickedAway)
  {
     $('.popup-marker').each(function() {
          $(this).popover('hide');
     });
    isVisible = clickedAway = false;
  }
  else
  {
    clickedAway = true;
  }
});