angularjs - Show Bootstrap tooltip on focus when an angular input has an error -
this example taken angularjs's docs
<form name="myform" ng-controller="ctrl"> usertype: <input name="input" ng-model="usertype" required> <span class="error" ng-show="myform.input.$error.required">required!</span> </form>
i want achieve same behavior bootstrap tooltip. i've looked @ angular ui-bootstraped project (http://angular-ui.github.io/bootstrap/) can't figure out how this.
something like:
<input type="text" value="click me!" tooltip="see? click away..." tooltip-trigger="focus" tooltip-placement="right" tooltip-enabled="myform.input.$error.required" <--- pseudo code />
i've tried several ways, looks can modify source code angular-bootstrap proper solution. but. there 'hacky' solution, maybe it'll or that's needed(examples angular-bootstrap , angular-input combined):
<form name="myform" class="my-form"> usertype: <input style="width: 50px;" name="input" ng-model="usertype" required value="click me!" tooltip="{{myform.$valid ? '' : 'see? click away...'}}" tooltip-trigger="focus" tooltip-placement="right" class="form-control"> <span class="error" ng-show="myform.input.$error.required">required!</span><br> <tt>usertype = {{usertype}}</tt><br> <tt>myform.input.$valid = {{myform.input.$valid}}</tt><br> <tt>myform.input.$error = {{myform.input.$error}}</tt><br> <tt>myform.$valid = {{myform.$valid}}</tt><br> <tt>myform.$error.required = {{!!myform.$error.required}}</tt><br> </form>
basically here remove text tooltip , hides.
Comments
Post a Comment