Bootstrap tooltip changes its position on 2nd click? - css

Question

I am using bootstrap 3 for my website. I have used bootstrap provided tooltip which I have been displaying on image click.
But the problem I am facing is: when I click the first time on the image it works properly, but when I click on 2nd time its position changes. I have attached two images which I get on 1st click and on 2nd click. Please provide solution for it.
I'm adding coding which I'm using .
$('#trypersonalLink').tooltip({
title : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
placement : "right",
trigger : "click",
html : true,
container : 'body'
}).on('shown.bs.tooltip', function () {
$('.tooltip.right').css('margin-left', '-86px');
$('.tooltip-inner').css({
'max-width':'370px',
'width':'445px'
});
});

Answer 1

Here is what happens :
You click on the button
The tooltip is loaded with default size, its position is JS-calculated (based on size)
shown.bs.tooltip is triggered
You change the tooltip size
Another click on the button
The tooltip is reloaded, but its position is re-calculated, based on its new size !
That's why your tooltip hasn't the same position on the first load only.
To fix this, you should avoid setting margin, max-width and width in shown.bs.tooltip. Use CSS for it !
$('#trypersonalLink').tooltip({
title : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
placement : "right",
trigger : "click",
html : true,
container : 'body'
});
.tooltip-inner {
max-width: 370px;
}
Bonus
If you only want to increase this tooltip size, but not the other ones, you can specify a different container in your options :
$('#trypersonalLink').tooltip({
title : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
placement : "right",
trigger : "click",
html : true,
container : '#extended'
});
$('#trypersonalLink2').tooltip({
title : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
placement : "right",
trigger : "click",
html : true,
container : 'body'
});
#extended .tooltip-inner {
max-width: 370px;
}
Bootply