Bootstrap Tooltip with angular not working

Question

I am using Tooltip Boostrap, but I could not make this working in my angular code, I tough angular code like: :{{o.client_name}}, :{{o.client_name}} will work in that code, but it's not working, someone 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 with 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>

Are you really hoping to inject html like that as data-title? — Michel
– Michel, Commented Oct 27, 2015 at 14:49
I can see here it's possible: stackoverflow.com/questions/13704789/… — raduken
– raduken, Commented Oct 27, 2015 at 14:55

davidkonrad · Accepted Answer · 2015-10-27 15:34:01Z

1

In a bootstrap-only situation it works right away -> http://jsfiddle.net/5h6kc5o5/

I believe your problem is the use of $(document).ready() - it is useless in an angular context. It is executed long before angular has finished rendering. Use a $timeout instead :

$timeout(function() {
   $('[data-toggle="tooltip"]').tooltip();   
})

Then tooltip() is called in the next loop.

answered Oct 27, 2015 at 15:34

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

Collectives™ on Stack Overflow

Bootstrap Tooltip with angular not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related