JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<div id="editors">
    <p>
        <input id="textEditor" value="John"></input>
    </p>
    <p>
        <input id="dateEditor" value="7/27/2012"></input>
    </p>
    <p>
        <input id="maskEditor" value="mask edit"></input>
    </p>
    <p>
        <input id="currencyEditor" value="42"></input>
    </p>
</div>

CSS

.ui-widget.ui-igpopover{
    border:none;
    background:none;
}
.ui-igpopover.ui-state-success > .ui-widget-content {
   border-color: #B6F2BB;
   background-color:#B6F2BB;
   color:#3a0d11 
}

.ui-igpopover.ui-state-success > .ui-igpopover-arrow-left {
   border-right-color: #B6F2BB;
}

.ui-igpopover.ui-state-warn > .ui-widget-content {
   border-color: #F7CA85;
   background-color:#F7CA85;
   color:#3a0d11 
}

.ui-igpopover.ui-state-warn > .ui-igpopover-arrow-left {
   border-right-color: #F7CA85;
}

.ui-igpopover.ui-state-error > .ui-widget-content {
   border-color: #FFA9AE;
   background-color:#FFA9AE;
   color:#3a0d11 
}

.ui-igpopover.ui-state-error > .ui-igpopover-arrow-left {
   border-right-color: #FFA9AE;
}

.ui-ignotify-icon-container {
	display: inline-block;
	vertical-align: middle;
}

JavaScript

$(function () {

    $("#textEditor").igTextEditor(); 
    $("#textEditor").igPopover({
        contentTemplate: '<div class=""><span class="ui-ignotify-icon-container"><span class="ui-icon ui-icon-alert"></span></span><span class="ui-state-error-text">Something went wrong here?</span></div>',
                        closeOnBlur: true,
          direction: "right",
                        showOn: "focus"            
    }).igPopover( "container" ).closest(".ui-widget.ui-igpopover").addClass("ui-state-warn");

    $("#dateEditor").igDateEditor();
    $("#dateEditor").igPopover({
        contentTemplate: '<div class=""><span class="ui-ignotify-icon-container"><span class="ui-icon ui-icon-info"></span></span><span class="ui-state-error-text">Info here</span></div>',
                        closeOnBlur: true,
          direction: "right",
                        showOn: "focus"            
    });

    $("#maskEditor").igMaskEditor();
    $("#maskEditor").igPopover({
        contentTemplate: '<div class=""><span class="ui-ignotify-icon-container"><span class="ui-icon ui-icon-circle-check"></span></span><span class="ui-state-error-text">Success</span></div>',
                        closeOnBlur: true,
          direction: "right",
                        showOn: "focus"            
    }).igPopover( "container" ).closest(".ui-widget.ui-igpopover").addClass("ui-state-success");

    $("#currencyEditor").igCurrencyEditor();
    $("#currencyEditor").igPopover({
        contentTemplate: '<div class=""><span class="ui-ignotify-icon-container"><span class="ui-icon ui-icon-circle-close"></span></span><span class="ui-state-error-text">Baaaad things!</span></div>',
                        closeOnBlur: true,
          direction: "right",
                        showOn: "focus"            
    }).igPopover( "container" ).closest(".ui-widget.ui-igpopover").addClass("ui-state-error");

});