Bootstrap tooltip在第二次点击时改变其位置？

Question

我为我的网站使用引导程序3。我用bootstrap提供的工具提示，我一直在图像上点击显示。
但我面临的问题是：当我点击图片上的第一次正常工作，但当我第二次点击它的位置变化。我已经附加了两张图片，第一次点击和第二次点击时会得到这些图片。请为它提供解决方案。

我正在添加我正在使用的编码。

$('#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. 工具提示被重新加载，但其位置是根据其新尺寸重新计算的！

这就是为什么你的工具提示只在第一次加载时没有相同的位置。

要解决这个问题，您应该避免在shown.bs.tooltip中设置margin，max-width和width。使用它的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; 
} 

---

奖金

如果你只是想提高这个提示的大小，而不是其他的，你可以在你的选择指定不同的容器：

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