CODEWITHSUNDEEP
angularjstooltipangular-ui-bootstrap
Vivek
Vivek

Reputation: 373

Bootstrap tooltip with angularjs not working

I am new with angularjs. Trying to implement form validation using bootstrap tooltip. Text with tooltip will come up if input field is invalid and gets the focus. Validation is working fine, i.e. the input field gets red if it has invalid value but the tooltip text is not showing. Here is html:

<form role="form" name="form" ng-controller="registerController">
        <div class="col-sm-12">
            <div class="form-group" ng-class="{ 'has-error': form.fullName.$invalid && form.fullName.$touched}">
                <input class="form-control has-feedback" name="fullName" id="fullName"
                       type="text"
                       required
                       ng-model="fullName"
                       tooltip="{{form.fullName.$valid ? '' : 'Full name required'}}"
                       tooltip-trigger="focus"
                       tooltip-placement="top" />
                <span class="glyphicon glyphicon-ok-sign text-success form-control-feedback" aria-hidden="true"
                      ng-show="form.fullName.$valid"></span>
            </div>
        </div>
</form>

for the extra info,I have included following scripts and css files:

<script src="../scripts/jquery-2.2.1.min.js"></script>  
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../scripts/bootstrap.min.js"></script>
    <script src="../scripts/angular.min.js"></script>
    <script src="../scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>

Help me to figure out how can I make it working. Thanks in advance.

Upvotes: 0

Views: 4377

Answers (1)

Artisan
Artisan

Reputation: 2124

If you are using https://angular-ui.github.io/bootstrap/#/tooltip

Your input field should look like this:

<input class="form-control has-feedback" name="fullName" id="fullName"
                   type="text"
                   required
                   ng-model="fullName"
                   uib-tooltip="Full name required"
                   tooltip-is-open="form.fullName.$invalid"
                   tooltip-trigger="none"
                   tooltip-placement="top" />

You want to remove the built in trigger by setting it to "none" and manage opening the tooltip based on the validity of the field.

If you're not set on using tooltips and would like a nice dynamic validation system that is expandable and customisable for different errors, you can do worse than take a look at Angular's Messaging:

https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages

and here:

http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html

Upvotes: 1

Related Questions