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?

"It doesn't work" does not qualify as a problem description. Please provide a detailed explanation: error message, stack trace, screen shot, etc. — Prune, Jan 05 '16 at 19:44
The tooltip shows up, but the position is not at the correct offset. — Bxx, Jan 05 '16 at 19:47
Please edit the additional information into your question, where it's easy for others to find. Also, you might take a run through the introductory tour, so you know what's expected when you post or reply. — Prune, Jan 05 '16 at 19:48
I've edited all the requested changes. Could you possibly consider answering this? — Bxx, Jan 06 '16 at 17:32

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

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>

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 05 '16 at 20:02

Tyler Lazenby

409
5
27

Thx, but I'm trying to adjust the default left/right placement so it is offset by more than usual. – Bxx Jan 05 '16 at 20:14
You would need to edit the code in the boostrap JavaScript files for that, since they will more than likely override any changes you make to an additional script, and it would create more processes than you need if it didn't anyway. – Tyler Lazenby Jan 05 '16 at 20:22
Please check the links provided, it appears to be possible without changing the source – Bxx Jan 06 '16 at 17:36

score 0 · Answer 2 · answered Jan 06 '16 at 18:29

0

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

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

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

answered Jan 06 '16 at 18:29

Bxx

1,615
1
17
30

Bootstrap Tooltip Position (Dynamic elements)

2 Answers2

Example