Booststrap Tooltip and data-container

Question

I am trying to modify tooltip background color and font color.

I have:

HTML:

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

CSS:

.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}

JS:

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

In this case everything works fine but when I add data-container="body" to html tooltip background color returns to it's default.

<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>

Answer 1

Here you go, this is my version

.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;
}