JSFiddle - React, Tailwind, and code Playground

by sampottinger

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://gleap.org/static/special/jquery.tooltipster.min.js"></script>
<link rel="stylesheet" href="http://gleap.org/static/special/tooltipster.css">
<span id="target" class="test-tooltip" title="<div class='glyphicon glyphicon-ban-circle glyphicon-title'><span class='glyphicon-content'>Error</span></div><div>Anything but zero is valid.</div>" type="text"><input type="text"></span>

CSS

.error-tooltip {
	border-radius: 0px; 
	border: 1px solid #AC2925;
	background: #D9534F;
	color: #fff;
}

.error-tooltip .tooltipster-content {
	font-size: 14px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: normal;
	line-height: 16px;
	padding: 8px 10px;
}

.glyphicon-title {
    margin-bottom: 7px;
    width: 100%;
    padding: 3px;
    border-bottom: solid 1px white;
}

.glyphicon-content {
    font-weight: bold;
    position: relative;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: bold;
    top: -2px;
    left: 5px;
}

JavaScript

$('.test-tooltip').tooltipster(
    {
        'theme': 'error-tooltip',
        'fixedWidth': 300
    }
);