如何将Bootstrap 4 Tooltip放置在.form-group标签外部紧邻位置？

我明白你现在的需求——想把tooltip放在.form-group标签的右侧紧邻位置（外部），而不是当前的容器内部。咱们来一步步调整代码实现这个效果：

问题根源 #

你当前的JS代码里把container设置为了.form-group，这会让Tooltip被渲染在这个容器内部，受限于容器的布局范围，自然没法跑到外部去。

修改方案 #

只需要调整Tooltip的两个配置项就能解决：

• 修改container选项：将其从父容器.form-group改为body，这样Tooltip会被添加到页面的body元素下，脱离原容器的限制；
• 调整placement选项：把bottom改成right，让Tooltip出现在问号图标的右侧，刚好对应.form-group的外部紧邻位置。

修改后的JS代码 #

$('[data-toggle="tooltip"]').each(function () { 
  $(this).tooltip({ 
    trigger: 'click', 
    placement: 'right', // 改为右侧放置
    html: true, 
    container: 'body'   // 改为body作为容器，脱离.form-group
  }); 
});

额外说明 #

如果你的.form-group设置了overflow: hidden这类样式，记得去掉，否则Tooltip可能会被截断；HTML结构保持现有状态即可，不需要调整DOM布局。

这样调整后，点击问号图标时，Tooltip就会乖乖出现在.form-group的右侧外部啦！

内容的提问来源于stack exchange，提问作者levipadre