Show Bootstrap tooltip on focus when an angular input has an error

Question

This example is taken from 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 to achieve the same behavior but with a Bootstrap tooltip. I've looked at the Angular UI-Bootstraped project (http://angular-ui.github.io/bootstrap/) but can't figure out how to do this.

Something like:

<input type="text" value="Click me!"
    tooltip="See? Now click away..." 
    tooltip-trigger="focus"
    tooltip-placement="right"
    tooltip-enabled="myForm.input.$error.required"   <--- pseudo code
    />

See if this helps: "Enable angular-ui tooltip on custom events". — Stewie
– Stewie, Commented Aug 7, 2013 at 18:10

Rasalom · Accepted Answer · 2014-10-15 14:40:28Z

1

I've tried several ways, looks like you only can modify source code from angular-bootstrap to get a proper solution. But. There is a 'hacky' solution, maybe it'll help you or even that's what you needed(examples from angular-bootstrap and 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? Now 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 you just remove text from tooltip and it hides.

answered Oct 15, 2014 at 14:40

Rasalom

3,1113 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Cole Over a year ago

Correct answer. This is exceptionally clever. Barely a hack :-) Thanks!

Collectives™ on Stack Overflow

Show Bootstrap tooltip on focus when an angular input has an error

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related