Bootstrap Snippet Error Tooltips using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
        
        <div class="form-group">
            <label>Email address</label>
            <input type="text" class="form-control" data-title="Please enter a value" />
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div.form-group.has-error > .tooltip > .tooltip-inner {
    background-color: #F78B83;
    color: #912323;
    box-shadow: 0 0 0 1px #D95252;
}
div.form-group.has-error > .tooltip.in {
      opacity:1;
}
div.form-group.has-error > .tooltip.top > .tooltip-arrow {
    border-top-color: #F78B83;
    } 
div.form-group.has-error > .tooltip.right > .tooltip-arrow {
    border-right-color: #F78B83;
}
div.form-group.has-error > .tooltip.bottom > .tooltip-arrow {
    border-bottom-color: #F78B83;
}
div.form-group.has-error > .tooltip.left > .tooltip-arrow {
    border-left-color: #F78B83;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function(){
    $('[data-title]').tooltip({
      placement: 'top auto',
      trigger: 'manual'
    });
    
    $('input').on('change', function(){
        var hasValue = $(this).val();
        var $div = $(this).closest('div.form-group');
                
        if(hasValue){
            $(this).one('hidden.bs.tooltip', function(){
                $div.removeClass('has-error');
            });
        } else {
            $div.addClass('has-error');
        }
        
        $(this).tooltip(hasValue ? 'hide' : 'show');
    });
    
    window.setTimeout(function(){
        $('input').trigger('change');
    }, 1000);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Error Tooltips"
Bootstrap 3.3.0 Snippet by tschettler

Related: See More

Questions / Comments:

"Error Tooltips" Bootstrap 3.3.0 Snippet by tschettler

Related: See More

Questions / Comments:

"Error Tooltips"
Bootstrap 3.3.0 Snippet by tschettler