Bootstrap Tooltip Position (Dynamic elements)

Question

I'm trying to convert my code to work with dynamic elements.

<li data-placement="right" data-toggle="tooltip" data-original-title="abc" title=""></li>
<li data-placement="left" data-toggle="tooltip1" data-original-title="def" title=""></li>

Here is my code for static elements. This works great:

//For RIGHT tooltips...
$("[data-toggle=tooltip]").tooltip({
    animation: false,
    delay: {show: 0, hide: 0}
});

$("[data-toggle=tooltip]").hover(function(){
    $('.tooltip').css('left', parseInt($('.tooltip').css('left')) + 90 + 'px');
});

//For LEFT tooltips... "tooltip1"...
$("[data-toggle=tooltip1]").tooltip({
    animation: false,
    delay: {show: 0, hide: 0}
});

$("[data-toggle=tooltip1]").hover(function(){
    $('.tooltip').css('left', parseInt($('.tooltip').css('left')) - 70 + 'px');
});

Here is my code for dynamic elements so far. The tooltip shows up, but I am unsure how to change it's position.

$('body').tooltip({
    selector: '[data-toggle=tooltip], [data-toggle=tooltip1]',
    animation: false,
    delay: {show: 0, hide: 0},
    placement: ????????

});

Here are some similar questions:

Dynamically position Bootstrap tooltip (for dynamically generated elements)

Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?

Answer 1

With bootstrap, the position or offset is managed by an attribute of the element within the HTML document. Its the "data-placement" attribute.

Example

<div class="coolClass" id="coolDiv" data-placement="left" data-toggle="tooltip" 
title="Left ToolTip">
    <p>Left Tooltip</p>
</div>

Answer 2

This worked for me to position the tooltip. No need for JS

.tooltip.right {
    margin-left: 60px;
}

.tooltip.left {
    margin-left: -40px;
}