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> 

same in plunker.

basically here remove text tooltip , hides.


Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -