Dynamically changing tooltip content on form errors

[rohanchandane]

I am trying to integrate angular-tooltips with input form. I want to change tooltip text on registrationForm.email.$error object change.

HTML:
<input tooltips tooltip-html="{{ emailToolTip }}" tooltip-show-trigger="focus" tooltip-hide-trigger="blur" tooltip-side="right"/>
<div>{{emailToolTip}}</div>

Controller:

$scope.emailToolTip = 'Initial tooltip';
$scope.$watch('registrationForm.email.$error', function (newVal) {
  $scope.emailToolTip = 'Updated tooltip';
  }
}, true);

above code changes <div> value but it doesn't change <input>'s 'tooltip-html' attribute value. Am I missing anything or is it a bug?

[45kb]

@rohanchandane Hi, it should work try using this:

$scope.$watch('registrationForm.email.$error', function (newVal) {
  $scope.$evalAsync(function () {
     $scope.emailToolTip = 'Updated tooltip';
 });  
}
}, true);

Also you could use this:

<a tooltips tooltip-view="/path/to/view.html" tooltip-view-ctrl="myFormCtrl">
Tooltip
</a>

I didn't test this but it could work too, try also just adding tooltip-lazy="false" and see if it fixs.

Then if not enough please send us a jsfiddle or plunkr to check your code, thanks!

[rDr4g0n]

I am not sure if this is the right approach, but I have some changes to bind tooltip-html to the template rather than concatenating it as a regular string. This means that any changes to the tooltip-html will flow all the way down and trigger a redraw in the tooltip. The downside is it requires ngSanitize to use trustAsHtml() on that property, which I guess could be a security issue?

Anyway if this sounds useful, i can make a PR for it.

[45kb]

@rDr4g0n hi, yes there is an open issue for that #39

If ngsanitize is available could be great to html-bind the content of tooltip-html if you are so gentle to try something let know .

Imho you should use tooltip-view and tooltip-view-ctrl if your tooltip html is articulated.

Does tooltip-html gets updated now or not? :)

Asking this because this should do exactly what you need https://github.com/720kb/angular-tooltips/blob/master/src/js/angular-tooltips.js#L423

[rDr4g0n]

@45kb I think you're right, using a proper view and controller is probably the better choice, but it is certainly tempting to just shove a few bound values into some HTML.

Note that the html var is NOT wrapped in interplation symbols, but concatenated as is: https://github.com/720kb/angular-tooltips/blob/master/src/js/angular-tooltips.js#L101 . Since the template string is not rebuilt through the lifecycle of the tooltip, the html value from initial creation will never change. Simply wrapping it in interpolation symbols causes updates to work as expected, but the sanitization kicks in and escapes the html characters. Hence, the need for $sce.trustAsHtml()

[rDr4g0n]

I put up a PR that might help. If it doesn't quite fit in with how you guys want to do this, please feel free to close it.

#79

[rohanchandane]

Good stuff! Thanks Guys.

[45kb]

Thanks @rDr4g0n will test it later and let you know, so, does you fixed the security problem with html only or there is something more/else? Just to be sure about what i am going to test.

Does it still watching html yes? Is it dynamic i mean, correct? :)

[45kb]

Shipped the new version https://github.com/720kb/angular-tooltips/tree/0.1.22

Thank you a lot !