Всплывающая подсказка Bootstrap меняет свое положение на 2-й клик?

Question

Я использую bootstrap 3 для своего сайта. Я использовал bootstrap предоставленную подсказку, которую я показывал при щелчке изображения.
Но проблема, с которой я столкнулся, - это: когда я нажимаю первый раз на изображении, он работает правильно, но когда я нажимаю на второй раз, его позиция меняется. Я приложил два изображения, которые я получаю по 1-му клику и по 2-му клику. Пожалуйста, предоставьте решение.

Я добавляю кодирование, которое я использую.

$('#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

Вот что происходит:

1. Вы нажимаете на кнопку
2. Тултип загружается с размерами по умолчанию, его положение JS рассчитанным (в зависимости от размера)
3. shown.bs.tooltip сработал
4. Вы изменяете размер всплывающей подсказки
5. Еще один щелчок на кнопке
6. Всплывающая подсказка перезагружается, но ее позиция пересчитывается на основе ее нового размера!

Именно поэтому ваша всплывающая подсказка не имеет одинакового положения только при первой загрузке.

Чтобы исправить это, вы должны избегать установки margin, max-width и width в shown.bs.tooltip. Используйте CSS для этого!

$('#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

Если вы хотите, чтобы увеличить этот размер всплывающей подсказки, но не другие, вы можете указать другой контейнер в параметрах:

$('#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