Html Booststrap工具提示和数据容器

我正在尝试修改工具提示背景色和字体颜色

我有：

HTML:

JS:

在本例中，一切正常，但当我将data container=“body”添加到html工具提示时，背景色将恢复为默认值

<table border="2px">
 <tr>
  <td data-toggle="tooltip" data-placement="bottom"
     title="" data-original-title="Tooltip on bottom"  
data-container="body" class="red-tooltip">Tooltip on bottom
  </td>
 </tr>
</table>

底部的工具提示

给你，这是我的版本

.tooltip .tooltip-inner {
 background: #f00;
 color: #fff;
 text-transform: uppercase;
 font-size: 12px;
}
.tooltip .tooltip-inner:before, .tooltip .tooltip-inner:after {
 border-bottom: 8px solid #f00 !important;
 border-left: 8px solid transparent !important;
 border-right: 8px solid transparent !important;
 top: -7px !important;
}

$(document).ready(function(){
    $("td").tooltip();
});

<table border="2px">
 <tr>
  <td data-toggle="tooltip" data-placement="bottom"
     title="" data-original-title="Tooltip on bottom"  
data-container="body" class="red-tooltip">Tooltip on bottom
  </td>
 </tr>
</table>

.tooltip .tooltip-inner {
 background: #f00;
 color: #fff;
 text-transform: uppercase;
 font-size: 12px;
}
.tooltip .tooltip-inner:before, .tooltip .tooltip-inner:after {
 border-bottom: 8px solid #f00 !important;
 border-left: 8px solid transparent !important;
 border-right: 8px solid transparent !important;
 top: -7px !important;
}