javascript - Bootstrap Tooltip with angular not working -
i using tooltip boostrap, not make working in angular code, tough angular code like: :{{o.client_name}}, :{{o.client_name}} work in code, it's not working, know why?
angular code:
<div class="col-md-4" ng-repeat="o in form.users" ng-show="form.users.length"> <div> <p><b>title</b>:{{o.title}}</p> <p><b>client name</b>:{{o.client_name}}</p> <p><b>description</b>:{{o.description}}</p> <p><b>dev tool</b>:{{o.primary_develop}}</p> </div> <div class="base_image_div"> <img ng-src="/images/{{o.thumbnail}}" class="img-responsive base_image" alt="{{o.description}}"> </div> </div>
my tooltip code angular:
<div class="container"> <a href="#" class="custom-tooltip" data-toggle="tooltip" data-placement="right" data-html="true" title="" data-title="<div class='row ballon-tooltip'> <ul> <li> <b>title</b>:{{o.title}}</li> <li> <b>client name</b>:{{o.client_name}} </li> <li> <b>description</b>:{{o.description}}</li> <li> <b>dev tool</b>:{{o.primary_develop}}</li> </ul> </div>"> <img ng-src="../public/images/{{o.thumbnail}}" class="img-responsive base_image" alt="{{o.description}}"></a></li> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>
in bootstrap-only situation works right away -> http://jsfiddle.net/5h6kc5o5/
i believe problem use of $(document).ready()
- useless in angular context. executed long before angular has finished rendering. use $timeout
instead :
$timeout(function() { $('[data-toggle="tooltip"]').tooltip(); })
then tooltip()
called in next loop.
Comments
Post a Comment