JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://raw.github.com/Craga89/qTip2/master/dist/jquery.qtip.min.css">
<script src="https://raw.github.com/Craga89/qTip2/master/dist/jquery.qtip.min.js"></script>
<div class="popover-trigger">
  <span>This is my button</span>
  <div class="popover-content">
      <p>My content</p>  
      <div class="toggle">Toggle Me</div>
  </div>
</div>

CSS

body{
    padding:100px;
}

.popover-trigger{
    background: #eee;
    padding: 10px 20px;
}

.popover-content{
    display:none;
}

.toggle{
    background: red;        
    line-height: 50px;
}

.toggle.active{
    background: blue;        
    line-height: 50px;
}











/*! qTip2 v2.0.0 | http://craigsworks.com/projects/qtip2/ | Licensed MIT, GPL */ #qtip-rcontainer{position:absolute;left:-28000px;top:-28000px;display:block;visibility:hidden}#qtip-rcontainer .ui-tooltip{display:block!important;visibility:hidden!important;position:static!important;float:left!important}.ui-tooltip,.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px}.ui-tooltip-content{position:relative;padding:5px 9px;overflow:hidden;text-align:left;word-wrap:break-word}.ui-tooltip-titlebar{position:relative;min-height:14px;padding:5px 35px 5px 10px;overflow:hidden;border-width:0 0 1px;font-weight:700}.ui-tooltip-titlebar+.ui-tooltip-content{border-top-width:0!important}.ui-tooltip-titlebar .ui-state-default{position:absolute;right:4px;top:50%;margin-top:-9px;cursor:pointer;outline:medium none;border-width:1px;border-style:solid}* html .ui-tooltip-titlebar .ui-state-default{top:16px}.ui-tooltip-titlebar .ui-icon,.ui-tooltip-icon .ui-icon{display:block;text-indent:-1000em;direction:ltr}.ui-tooltip-icon,.ui-tooltip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-decoration:none}.ui-tooltip-icon .ui-icon{width:18px;height:14px;text-align:center;text-indent:0;font:normal bold 10px/13px Tahoma,sans-serif;color:inherit;background:transparent none no-repeat -100em -100em}.ui-tooltip-focus{}.ui-tooltip-hover{}.ui-tooltip-default{border-width:1px;border-style:solid;border-color:#F1D031;background-color:#FFFFA3;color:#555}.ui-tooltip-default .ui-tooltip-titlebar{background-color:#FFEF93}.ui-tooltip-default...

JavaScript

$(document).ready(function(){
    
    // Popovers - qtip2

    $(".popover-trigger").qtip({

        content: {
            text: function(){
                var $this = $(this);
                var theContent = $this.find(".popover-content");

                return theContent.clone();
            }
        },

        show: {
            event: "mouseover"
        },

        hide: {
            event: "mouseout"
        },

        events: {
            hide: function(event, api) {
                // This basically updates the content of the popover before it hides, allowing for persistant content.
                var $this = $(this);
                var theID = $this.qtip('option', 'id');
                var currentContent = $("#ui-tooltip-"+theID).find(".ui-tooltip-content").html();

                $this.qtip('option', 'content.text', currentContent);
            }
        }
    });


    $(".toggle").live("click", function(){
      $(this).toggleClass("active");
    });

});