bootstrap tooltip not showing context color - html

Question

I had a problem where my tooltips where not showing on top of my datatable.
I solved this by adding data-container='body' as an attribute (as described here) which now shows the full tooltip but creates a new problem; it removes the context of the tooltip.
As example:
<div class="text-info tooltip-info"
data-rel="tooltip"
data-html="true"
data-original-title="
<div class="text-left">
<i><b>Commercial decision:</b> <br> </i> <br>
<i><b>Technical decision:</b> <br> </i> <br>
<i><b>Overall decision:</b> <br> </i>
</div>"
style="font-weight: bold;overflow: auto;">
Pending
</div>
yields:
which is not shown on top of the datatable but does have the correct context.
Adding data-container='body' yields:
which display correctly but doesn't show any context.
How do i display the tooltip correctly while retaining the context i want?

Answer 1

I hope this will fix your issue. if not then I would like to ask your code too. it's easy to inspect then.
$('[data-toggle="tooltip"]').tooltip();
.parent-container {
width: fit-content;
position: relative;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="parent-container"><div class="" data-toggle="tooltip" data-placement="right" data-container=".parent-container" data-html="true" title="
<div class="text-left">
<i><b>Commercial decision:</b> <br> </i> <br>
<i><b>Technical decision:</b> <br> </i> <br>
<i><b>Overall decision:</b> <br> </i>
</div>"
style="font-weight: bold;overflow: auto;">
Pendings
</div></div>