JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="well well-small item" rel="tooltip" data-placement="left" data-original-title="Click to Open">
                <article class="row">
                  <!-- urgency -->
                  <h6 class="span3 status-pop DueDate" rel="popover" data-placement="top" data-trigger= "hover" data-title="Status Message" data-content="Conduct Quality Review">
                    <div class="progress progress-danger">
                      <div class="bar" style="width: 90%"></div>
                    </div>
                    <i class="icon-info small mr flickeringElementFix" aria-hidden="true"></i>Due in <span class="filterUrgency">5</span> days
                  </h6><!-- #urgency -->
                </article>
                </a>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

CSS

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.wrapper{border-top:5px solid #5c7f92}body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:75%;line-height:1.5em;color:#525252;background:#f1f1f1 url(../images/bg_body_texture.jpg)}a{color:#7798aa;text-decoration:none}a:hover{color:#7798aa;text-decoration:underline}a:focus{outline:0}a.well-small:visited,a.well-callout:visited,a.well-small:hover,a.well-callout:hover{color:#525252}.img-rounded{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.img-polaroid{padding:4px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.1);box-shadow:0 1px 3px...

JavaScript

// popovers
$('.status-pop').popover({ html : true });

// tooltips
$('.item').tooltip();
$('.status-pop').mouseover(function() {
  $('.item').tooltip('hide')
});