JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="form-group">
    <label for="email" class="control-label">* E-Mail Address</label>
    <input type="email" id="email" name="email" class="form-control validate validate-required validate-email" placeholder="[email protected]">
</div>

JavaScript

// Event listener.
$('input').on('focusout', function (event) {
    isValidInput(event.target);
});

initTooltip('email', {
            'trigger': 'manual',
            'placement': 'bottom',
            'title': 'Enter your email address'
        });


// Validates the given input field.
function isValidInput($element) {
    if (hasValue($element)) {
        console.log('INPUT HAS VALUE');
    } else {
        setInputFeedback($element, 'danger');
    }
}

// Checks that the required input has any value.
function hasValue($element) {
    return $('#' + $element.id).val() ? true : false;
}

// Sets input feedback.
function setInputFeedback($element, status) {
    var feedbackClass,
    feedbackGlyphicon;

    switch (status) {
        case 'error':
            feedbackClass = 'has-error';
            feedbackGlyphicon = 'glyphicon-remove';
            break;
    }

    $('#' + $element.id).closest('.form-group').addClass(feedbackClass + ' has-feedback');
    $('<span class="glyphicon ' + feedbackGlyphicon + ' form-control-feedback"></span>').hide().appendTo($('#' + $element.id).closest('.form-group')).fadeTo('fast', 1, function () {
        // Done.
    });
}

// Init tooltip for the given element.
function initTooltip(elementID, options) {
    console.log('--- initTooltip ---');
    $('#' + elementID).tooltip({
        'placement': options.placement,
            'title': options.title,
            'trigger': options.trigger
    }).on({
        'blur': function () {
            console.log('ON BLUR EVENT');
            $('#' + elementID).tooltip('show');
        }
    });
}