title: Buttons with Bootstrap ToolTip inside DataTable Cells [Not working]
body: <p>I have a little problem... . To make easy and extract problem of my main project, I have a simple table with few columns and some data, last column have two buttons with bootstrap tooltip, but this is not working. This is my code:</p>
  
  <blockquote>
    <p>I'm using DataTable plugin v1.10.16 and Boostrap v3.3.7.</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;DataTable - Buttons with ToolTip&lt;/title&gt;
  
   &lt;link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
   &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;section class="container" style="margin-top: 50px;"&gt;
    
    &lt;div class="row"&gt;
  
     &lt;div class="col-sm-12"&gt;
      
      &lt;table class="table"&gt;
       &lt;thead&gt;
        &lt;tr&gt;
         &lt;th&gt;Name&lt;/th&gt;
         &lt;th&gt;LastName&lt;/th&gt;
         &lt;th&gt;Age&lt;/th&gt;
         &lt;th&gt;Actions&lt;/th&gt;
        &lt;/tr&gt;
       &lt;/thead&gt;
  
       &lt;tbody&gt;
        &lt;tr&gt;
         &lt;td&gt;Jhon&lt;/td&gt;
         &lt;td&gt;Jhosson&lt;/td&gt;
         &lt;td&gt;20&lt;/td&gt;
         &lt;td&gt;
          &lt;button id="ButtonA" class="btn btn-primary" data-toogle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;"&gt;A&lt;/button&gt;
  
          &lt;button id="ButtonB" class="btn btn-danger" data-toogle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;"&gt;B&lt;/button&gt;
         &lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr&gt;
         &lt;td&gt;Scalert&lt;/td&gt;
         &lt;td&gt;Lopez&lt;/td&gt;
         &lt;td&gt;33&lt;/td&gt;
         &lt;td&gt;
          &lt;button class="btn btn-primary" data-toogle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;"&gt;A&lt;/button&gt;
  
          &lt;button id="ButtonB" class="btn btn-danger" data-toogle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;"&gt;B&lt;/button&gt;
         &lt;/td&gt;
        &lt;/tr&gt;
  
       &lt;/tbody&gt;
  
      &lt;/table&gt;
  
     &lt;/div&gt;
  
  
    &lt;/div&gt;
  
  
   &lt;/section&gt;
  
  
   &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"&gt;&lt;/script&gt;
  
   &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
   &lt;script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
   &lt;script type="text/javascript"&gt;
   
  
    $(document).ready(function(){
  
     $("[data-toogle='tooltip']").tooltip();
  
     $(".table").DataTable({
  
      "columns": [
                      { "data": "Name" },
                      { "data": "LastName" },
                      { "data": "Age" },
                      { "data": "Button" }
                  ]
  
     });
  
    });
  
   &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I found that <strong>if eliminate property columns in main instance</strong>, <em>it works without problem</em>. But, I can't delete it because I have other button that execute a function to table update and I need set it to make Binding/Match with JSON Object. </p>
  
  <p>Somebody have a idea how to resolve it ?</p>