JSFiddle - React, Tailwind, and code Playground

by sampottinger

HTML

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<link rel="stylesheet" href="http://moxiecode.cachefly.net/tinymce/v8/css/all.min.css?v=8">
<link rel="stylesheet" href="http://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">
<textarea name="content" style="width:100%"></textarea>
<div id="target" class="character-count-holder">
    Characters entered: <span class="test-tooltip" title="You have exceeded the maximum character count." id="character-count">0</span> of max 500.
</div>

CSS

.character-count-holder {
    font-size: 16px;
    padding: 10px;
    background-color: #E0E0E0;
}

.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

tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link charmap print preview anchor",
        "searchreplace visualblocks fullscreen",
        "insertdatetime table paste spellchecker"
    ],
    browser_spellcheck : true,
    gecko_spellcheck: true,
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link",
    height: 300,
    setup : function (editor) {
        editor.on('keyup', function (e) {
            var content = editor.getContent({format: 'text'});
            content = tinymce.trim(content);
            $('#character-count').html(content.length);
            
            if (content.length > 500) {
                $('.character-count-holder')
                .animate({'padding-top':'40px'}, function () {
                    $('.test-tooltip').tooltipster('show');
                });
            } else {
                $('.character-count-holder')
                .animate({'padding-top':'10px'}, function () {
                    $('.test-tooltip').tooltipster('hide');
                });
            }
        });
    },
    forced_root_block : 'div',
    statusbar: false
});

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