JSFiddle - React, Tailwind, and code Playground

by scruffles

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>

<a id="launchButton" href="#myPopup" role="button" class="btn" data-toggle="modal-popover">Launch demo popover</a>


<div id="myPopup" class="popover bottom">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover bottom</h3>
    <div class="popover-content">
        <p>Sed posuere consectetur est at lobortis. Aenean 
            eu leo quam. Pellentesque ornare sem lacinia 
            quam venenatis vestibulum.
        </p>
    </div>
</div>

CSS

#launchButton {
    margin: 100px;
}

#myPopup {
    z-index: 1050;
}

/* todo need some javascript to find the correct backdrop */
.modal-backdrop {
    background: none;
}

JavaScript

//$('#myModal').modal();

$.fn.modalPopup = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('modal')
        , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
      if (!data) $this.data('modal', (data = new Modal(this, options)))
      if (typeof option == 'string') data[option]()
      else if (options.show) data.show()
    })
  }