我的工具提示在主页上工作得很好。在稍后由 AJAX 调用生成的模式中,工具提示将不起作用。
我在生成的模态( AJAX 调用的结果)中包含了以下代码。
重新初始化工具提示
<script>
$('.tooltips').tooltip();
</script>
的html中
<button class="btn btn-lg default tooltips blue-madison" type="submit"
name="O" data-container="body" data-placement="top"
data-original-title="THIS TEXT FOR TOOLTIPS">
<i class="fa fa-industry blue-madison"></i> BUTTON1
</button>
<button class="btn btn-lg default tooltips green-jungle" type="submit"
name="P" data-container="body" data-placement="top"
data-original-title="THIS TEXT FOR TOOLTIPS">
<i class="fa fa-user green-jungle "></i> BUTTON2
</button>
为什么工具提示不显示-我做错了什么?
6条答案
按热度按时间neskvpey1#
这可能是因为你应该在modal的内容被插入到文档中之后调用
$('.tooltips').tooltip();
。否则,请发布一个小提琴与您当前的代码,我们可以测试它。
pgky5nke2#
另一种解决方案是使用container选项将工具提示绑定到模态:
7tofc5zh3#
如果你使用react,我有一个不同的答案。你所要做的就是给予父容器一个ref,然后在overlayTrigger组件中,你只需要把ref作为一个参数传递给容器。
ix0qys7i4#
也许这对某人有帮助:我有一个案例,当需要 AJAX 来填充和显示一个bootstrap模式(呈现视图)时(调用下面的showModal(url,event)); bootstrap tooltip和fengyuanchen/datepicker都没有响应,所以我在检测到模式加载后设法触发了它们,如下所示:
7dl7o3gd5#
修复此行为的最佳方法是在md-tooltip中添加此prop:
md-z-index="9999"
或者不同的z索引。不需要在CSS中硬编码。您还可以在控制器内的范围变量中定义z索引,如下所示
在你的html中(通常我会使用
{{}}
来打印变量,但我在laravel上,所以我使用了<% %>
)u91tlkcl6#
这个问题是由于模态和工具提示的z索引。你可以试试这个