JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<a href="#" class="btn btn-danger popup-marker1" data-placement="bottom"
style="margin-left: 100px; margin-top:150px;">Messages</a>
<a href="#" class="btn btn-danger popup-marker2"
data-placement="bottom" style="margin-left: 50px; margin-top:150px;">Notifications</a>
<a
href="#" class="btn btn-danger popup-marker3" data-placement="bottom" style="margin-left: 50px; margin-top:150px;">Invitations</a>
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
JavaScript
var clickOver = clickOver || {};
clickOver.uniqueId = $.now();
clickOver.ClickOver = function (selector, options) {
var self = this;
self.options = options;
self.data = {};
self.data.isVisible = self.data.clickedAway = false;
self.data.callbackMethod = self.options.content;
self.data.uniqueDiv = document.createElement("div");
self.data.divId = self.data.uniqueDiv.id = ++clickOver.uniqueId;
self.data.uniqueDiv.innerHTML = options.loadingContent();
if (options.width != null)
$(self.data.uniqueDiv).css("width", options.width);
if (options.height != null)
$(self.data.uniqueDiv).css("height", options.height);
options.trigger = 'manual';
options.animation = false;
options.content = self.data.uniqueDiv;
self.onClose = function () {
$("#" + self.data.divId).html(options.loadingContent());
$(selector).popover('hide');
self.data.isVisible = self.data.clickedAway = false;
};
self.onCallback = function (result) {
$("#" + self.data.divId).html(self.data.cache = result);
};
$(selector).popover(self.options);
//events
$(selector).bind("click", function (e) {
console.log( $(selector).filter(function (f) {
return $(selector)[f] == e.target;
}));
if(self.data.isVisible)
{$(selector).filter(function (f) {
return $(selector)[f] == e.target;
}).popover('hide'); return;}
$(selector).filter(function (f) {
return $(selector)[f] != e.target;
}).popover('hide');
$(selector).popover("show");
if (self.data.cache != null && self.options.willCache)
self.onCallback(self.data.cache);
else
self.data.callbackMethod(self.onCallback);
self.data.isVisible = !(self.data.clickedAway = false);
});
$(document).bind("click", function (e) {
if (self.data.isVisible && self.data.clickedAway &&...