Bootstrap工具提示在初始悬停时处于错误位置,然后处于正确位置
hay*_*ner 4 html css tooltip twitter-bootstrap
我在网页上使用来自twitter bootstrap的工具提示.工具提示已初始化,但在第一次悬停时,它处于错误的位置; 但是,在随后的悬停中,工具提示处于正确的位置.
我认为问题出现了,因为工具提示附加的div是绝对定位的.
这是我的html中的div标签:
<div class="btn-group" id="sample-menu" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
这是第一个悬停时工具提示的显示方式:
以下是在此之后每个悬停显示的方式:
(尺寸不仅仅改变截图裁剪尺寸)
应用于div的样式是:
#sample-menu {
position: absolute;
top: 95px;
right: 608px;
}
我可能会以不同的方式定位div以使其工作,我只是想知道为什么工具提示似乎在绝对定位的div上完美地工作,但仅在第一次悬停之后.
**我在没有绝对定位的div上添加了一些工具提示,我遇到了同样的问题(工具提示的第一次出现从我的元素中删除,然后在第一次出现之后它是正确的).我在页面上有一个svg,其元素正在添加并使用javascript(d3)进行调整.在添加/调整所有页面元素之后,似乎需要调用某些东西来重新定位工具提示,但是,Bootstrap Tooltip或Tether重新定位解决方案都没有对我有用.
Eri*_*c G 12
以下对我的工作提示涉及绝对定位:
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
我只是在页面上完成所有内容渲染后触发此脚本,一切都设置正常.此外,在工具提示更新的区域,我必须再次运行它.
- 我看到引导页面提到这个'容器'选项可以指定,但我不完全理解它的作用.页面说明指定容器'以避免在更复杂的组件中呈现问题',以及稍后"将工具提示附加到特定元素".我在页面加载后尝试了你的代码,但它没有解决我的问题. (2认同)
您还可以'body'在工具提示配置中指定其他容器（不仅）。
我有这样的 HTML 项目：
<body>
<div class='wrapper'>
...
<div>
<p>Test message with tooltip <span class="tooltip-icon"
data-toggle="tooltip"
data-placement="right"
title="Tooltip test">?</span></p>
</div>
...
</div>
</body>
并且在工具提示定位计算方面有问题，使用这个 JS：
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
据我了解，问题是由元素margin: 0样式引起的body。
尝试在不更改body元素样式和默认标记的情况下解决此问题，我使用了其他容器，如下所示：
$('[data-toggle="tooltip"]').tooltip({
container: '.wrapper'
});
并且一切正常，没有任何变化。
来自引导程序文档：
https://getbootstrap.com/docs/4.3/components/tooltips/#options
name: container
values: string | element | false
default: false
descr.: Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.
如果您检查 bootstrap 的 tooltip.js，您会看到，如果您将containervalue设置为字符串，它会尝试在 DOM 中查找具有给定选择器的元素（请参阅参考资料_proto._getContainer() method）
添加boundary: 'window'为我解决了这个问题，如下所示：
$(document).ready(function () {\n $('[data-toggle="tooltip"]').tooltip({\n trigger: 'hover click focus',\n boundary: 'window'\n })\n });\n来自引导文档：
\n\n\n当父容器具有溢出：自动或溢出：像我们的.table响应式滚动时，工具提示位置尝试自动更改，但仍保持原始放置\xe2\x80\x99s定位。要解决此问题，请将边界选项设置为默认值“scrollParent”以外的任何值，例如“window”：
\n
这是原始问题的代码笔
我将主体的位置设置为“相对”，以便我的子元素可以按照我想要的方式绝对定位，并且我还将主体的边距设置为“0 auto”以使内容居中。这些样式干扰了 Eric 在回答中提到的工具提示容器选项解决方案。
/*original css*/
body {
position: relative;
width: 980px;
/*set as important to work in codepen example*/
margin:0 auto !important;
}
#sample-menu{
position: absolute;
top: 109px;
left: 600px;
}
//js that didn't solve tooptip positioning issue
$(function(){
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
});
首先将这种样式应用于身体是不好的做法。这是一个解决此问题的代码笔，并且仍然为我提供了我想要的外观和行为，而没有工具提示问题。我在内容周围添加了一个容器来应用样式，然后 Eric G 建议的工具提示“container: 'body'”解决方案起作用了。
/*new css with styling on a container div instead of the body*/
.container {
position: relative;
width: 980px;
margin:0 auto;
}
#sample-menu{
position: absolute;
top: 109px;
left: 600px;
}
//js now fixes the tooltip positioning issue
$(function(){
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
});
| 归档时间： |
|
| 查看次数： |
14957 次 |
| 最近记录： |