JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://st.ctast.com/js/sco.tooltip.js"></script>
<link rel="stylesheet" href="http://st.ctast.com/css/scojs.css">
<a href="#" data-trigger="tooltip" data-content-elem="#popover" data-autoclose="0" data-cssclass="popover">hover me</a>
<div id="popover" style="display:none">
  <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

.popover {
    max-width: 276px;
    padding: 1px;
    text-align: left;
    white-space: normal;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    color: #333;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    width: 300px;
}

.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.popover-content {
    padding: 9px 14px;
}

p {
    margin: 0 0 10px;
}

.popover.pos_s .pointer {
	border-bottom-color: rgba(0, 0, 0, 0.2);
	border-top-width: 0;
}

.popover.pos_s .pointer:after {
    border-bottom: 8px solid #f7f7f7;
    border-left: 8px dashed transparent;
    border-right: 8px dashed transparent;
    content: '';
    position: absolute;
    margin-left: -8px;
    top: 1px;
}