JSFiddle - React, Tailwind, and code Playground

by bjankord

HTML

<script src="http://webphibian.com/standards/js/jquery.qtip.min.v2.04.15.11.js"></script>
<span class="tool-tip-btn">Active Challenges</span>                     
<!-- Form Tip 1-->                     
<div class="tip">                         
    <div class="tip-body">                            
        <h2 class="tip-header">Active Challenges</h2>                            
        <div class="tip-content">This is the number of challenges that can be active on your site at any given time.</div>                         
    </div>                     
</div><!--/Tip -->

CSS

/* TOOLTIPS ------------------------------------------*/
/* * qTip2 - Pretty powerful tooltips * http://craigsworks.com/projects/qtip2/ * Date: Thu Apr 14 16:58:32 PDT 2011 */   

.tip {     
    display: none; /* Hides inline tooltip content */ 
}  

/* Fluid class for determining actual width in IE */ 
.ui-tooltip-fluid{     
    display: block;     
    visibility: hidden;     
    position: static !important;     
    float: left !important; }  

.ui-tooltip, .qtip{     
    position: absolute;     
    left: -28000px;     
    top: -28000px;     
    display: none;     
    max-width: 430px;     
    min-width: 50px; }      

.ui-tooltip-content{         
    position: relative;         
    padding: 4px 9px 4px 9px;         
    overflow: hidden;         
    border-width: 1px;         
    border-style: solid;         
    text-align: left;         
    word-wrap: break-word;         
    overflow: hidden;     }      

.ui-tooltip-titlebar{         
    position: relative;         
    min-height: 14px;         
    padding: 2px 35px 1px 10px;         
    overflow: hidden;         
    border-width: 1px 1px 0;         
    border-style: solid;         
    font-weight: bold;     
}      

.ui-tooltip-titlebar + .ui-tooltip-content{ border-top-width: 0px !important; }          

/*! Default close button class */         
.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;         
}          

.ui-tooltip-icon, .ui-tooltip-icon .ui-icon{             
    -moz-border-radius: 3px;      ...

JavaScript

$(document).ready(function() {    
    $('.tool-tip-btn').each(function () {     
        $(this).qtip({         
            content: { text: $(this).nextAll('.tip').find('.tip-body') },         
            style: 'tool-tip',         
            position: { my: 'left top', at: 'left bottom'}     
        }); 
    });   
});