Bootstrap工具提示在第二次点击时改变其位置？

Question

我在我的网站上使用bootstrap 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. 重新加载工具提示，但会根据其新尺寸重新计算其位置！

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

要解决此问题，您应该避免在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;
}

---

<强>加成

如果您只想增加此工具提示大小，而不是其他工具提示大小，则可以在选项中指定其他容器：

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