I want to show a tooltip next to invalid and dirty input elements in an bootstap modal form in angularjs application. I am currently not using angular-ui. I tried searching and could find implementations involving writing a directive.
Since we already use bootstrap and angularjs, I was wondering what would be the best way to show a tooltip that appears as soon as the input field reaches the invalid and dirty state.
Maybe something like this in your HTML (Typical Bootstrap form structure):
<div class="form-group" validation-tooltip>
<label>My Label</label>
<input type="text" ng-model="myModel" name="someName" required data-toggle="tooltip" data-placement="right" title="Your tooltip text." class="form-control">
</div>
Then write a directive to fire off the tooltip using your event of choice. In my example I've place a custom attribute directive on the form-group element, then in the link function (in your directive) you'd want to get at the required attribute like:
var inputEl = element.find('input[name]');
