JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.css  Copy https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<section class="content-section">

  <h2>What Are They?</h2>

  <p style=' margin-bottom:1em;'>Also known as <span class="glossary-term-pop" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="(aka Research community) pronounced 'M-Rock'. One of the terms used for a research community." title="" data-original-title="MROC (Market Research Online Community)">MROCs</span>    (Market Research Online Community) the community is generally a closed, by invitation only, Webs.</p>

</section>

<hr />

<section class="content-section">
  <h2>Pros and Cons</h2>
  <section class="tabs" style=' margin-top:15em;'>
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">Pros</label>

    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">Cons</label>

    <div class="clear-shadow"></div>

    <div class="content less-stuff">
      <div class="content-1">
        <h3>Pros</h3>

        <p>Communities are usually larger than any set of <span class="glossary-term-pop" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="(aka Focus Group Interview or Group D with fewer participants - possibly 4-6."
          title="" data-original-title="Focus Group">focus groups</span>. This can allow minority opin-minded participants to take place - rich data that would never emerge in a focus group setting.</p>

      </div>
      <div...

CSS

.glossary-term-pop{
	background-color:#F0F0F0;
	padding:0px 2px .25em 2px;
	border: 1px dotted #d0d0d0;
	font-size: 1em; 
	font-family:"Verdana", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica, Arial", "Lucida Grande", "sans-serif";
	color:#5bc0de;
	z-index:100;
}

/* Tabs let-side style B - animated ------------- */ 


section.tabs {
    position: relative;
	margin: 80px auto 50px auto;
	width: 100%;
	background: #fff;
}

section.tabs input {
	position: absolute;
	z-index: 50;
	width: 120px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	cursor: pointer;
}
section.tabs input#tab-2{
	top: 40px;
}
section.tabs input#tab-3{
	top: 80px;
}
section.tabs input#tab-4{
	top: 120px;
}

section.tabs label {
	background: #39d5fe;
	background: -moz-linear-gradient(top, #39d5fe 0%, #4e8c8a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#39d5fe), color-stop(100%,#39d5fe));
	background: -webkit-linear-gradient(top, #39d5fe 0%,#39d5fe 100%);
	background: -o-linear-gradient(top, #39d5fe 0%,#39d5fe 100%);
	background: -ms-linear-gradient(top, #39d5fe 0%,#39d5fe 100%);
	background: linear-gradient(top, #39d5fe 0%,#39d5fe 100%);
	font-size: 15px;
	/* watch these following two items - changing these can alter alignment of buttons and content sections. */
	line-height: 40px;
	height: 40px;
	position: relative;
	padding: 0 20px;
	display: block;
	width: 80px;
	color: #333;
	letter-spacing: 1px;
	text-transform: normal;
	font-weight: bold;
	text-align: right;
	float: left;
	clear: both;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 0 0 3px;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}


section.tabs .content {
    background: #eee;
	position: relative;
    width: auto;
	/* changes positioning of content block */
	margin: -175px 0 0 120px;
	height: 400px;
	z-index: 5;
	overflow: auto;
   ...

JavaScript

//bootstrap popover tooltip

$(document).ready(function() {
  $(".glossary-term-pop").popover({
    trigger: "hover",
    html: true,
    delay: {
      "show": 100,
      "hide": 100
    }
  });

  //$(".glossary-term-pop").popover({ trigger: "focus", html : true });
});