JSFiddle - React, Tailwind, and code Playground

by nessajtr

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>

JavaScript

var clickOver = clickOver || {};
clickOver.uniqueId = $.now();

clickOver.ClickOver = function (selector, options) {
    var self = this;

    //default values
    var isVisible, clickedAway = false;

    var callbackMethod = options.content;

    var uniqueDiv = document.createElement("div");
    var divId = uniqueDiv.id = ++clickOver.uniqueId;
    uniqueDiv.innerHTML = options.loadingContent();

    options.trigger = 'manual';
    options.animation = false;
    options.content = uniqueDiv;

    self.onClose = function () {
        $("#" + divId).html(options.loadingContent());
        $(selector).popover('hide')
        isVisible = clickedAway = false;
    };
    self.onCallback = function (result) {
        $("#" + divId).html(result);
    };

    $(selector).popover(options);

    //events
    $(selector).bind("click", function (e) {
        $(selector).filter(function (f) {
            return $(selector)[f] != e.target;
        }).popover('hide');

        $(selector).popover("show");
        callbackMethod(self.onCallback);

        isVisible = !(clickedAway = false);
    });

    $(document).bind("click", function (e) {
        if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
            self.onClose();
            isVisible = clickedAway = false;
        } else clickedAway = true;
    });
}

new clickOver.ClickOver(".popup-marker3", {
    html:true,
    title: "<img src='http://basementcoders.com/wp-content/uploads/2010/11/newsflash_logo-e1290819421137.png'/>",
    content: function (callback) {
        setTimeout(function () {
            callback("LOADED 3");
        }, 2000);
    },
    loadingContent: function () {
        return "Loading...";
    }
});


new clickOver.ClickOver(".popup-marker2", {
    html:true,
    title: "<img src='http://basementcoders.com/wp-content/uploads/2010/11/newsflash_logo-e1290819421137.png'/>",
    content: function (callback) {
        setTimeout(function () {
            callback("LOADED...