JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="circleBase mini">

  <span class="glyphicon glyphicon-exclamation-sign light-blue" tabindex="0" data-trigger="focus" data-container="body" data-toggle="popover" data-placement="left" title="" data-content="<span class='glyphicon glyphicon-stats icon-descript'></span>A type of presentation graphic in which numerical values are illustrated with horizontal columns. Column graphs are particularly effective for showing values that are categorized by two separate characteristics."
  data-original-title="<span class='glyphicon glyphicon-question-sign pull-right'></span><div class='pop-title'>Column Chart</div>"></span>

</div>


<!--
data-trigger="focus"


<button type='button' class='btn btn-xs btn-default pull-right'><span class='glyphicon glyphicon-question-sign pop-buttons'></span></button>
-->

CSS

body {
  margin-left: 350px;
  margin-top: 180px;
}

.popover {
  border: 1px solid rgba(51, 122, 183, 0.42)!important;
  box-shadow: rgba(51, 122, 183, 0.42) 0px 5px 10px!important;
  width: 220px;
}

.popover.left>.arrow {
  border-left-color: rgba(51, 122, 183, 0.72)!important;
}

.light-blue {
  color: #337ab7;
}

.popover-content {
  color: #928888;
}

.icon-descript {
  font-size: 125px;
  width: 100%;
  display: inline-block;
  text-align: center;
  color: rgba(51, 122, 183, 0.42);
}

.pop-title{
  font-weight: bold;
}

.popover-title{
  color: #fff;
  background-color: #337ab7;
}

JavaScript

$('[data-toggle="popover"]').popover({
  html: true
})