我的工具提示正在完美地在主页上工作。在稍后由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>
为什么工具提示不显示 - 我做错了什么?
答案 0 :(得分:5)
可能是因为在模式的内容已插入文档后,您应该致电$('.tooltips').tooltip();
。
否则,请发布您当前代码的小提琴,我们可以对其进行测试。
答案 1 :(得分:1)
另一种解决方案是使用容器选项将工具提示绑定到模态:
$('#modal').on('shown.bs.modal', function() {
console.log("modal show");
$('.tooltips').tooltip({
container: $(this)
});
});
答案 2 :(得分:0)
问题是由于模态和工具提示的z-index而引起的。你可以试试看,
.tooltip {
z-index: 100000000;
}
答案 3 :(得分:0)
也许这对某人有帮助:我有一个案例,需要使用ajax来填充并在单击时显示一个引导模式(渲染视图)(在下面调用showModal(url,event));引导工具提示以及fengyuanchen / datepicker都没有响应,因此我设法在检测到模态加载后触发了它们,如下所示:
function showModal(url, event) {
$.when(
$.ajax({
url: url,
method: 'GET',
success: function (data) {
$('#modal-wrapper').html(data);
}
})
).then(function() {
$('.loaded_modal').modal().on('shown.bs.modal', function() {
$('[data-toggle="datepicker"]').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
zIndex: 1070,
container: '.modal'
});
$('.modal [data-toggle="tooltip"]').tooltip({trigger: 'hover'});
// could also be on click {trigger: 'hover click'}
});
});
答案 4 :(得分:0)
解决此问题的最佳方法是在md-tooltip中添加此道具:
md-z-index="9999"
或其他z-index。 无需在CSS中对此进行硬编码。 您还可以在控制器内部的范围变量中定义z-index,如下所示:
// in controller
$scope.btnOptions = {
isOpen:false,
label: 'test button',
class: 'md-scale',
zIndex: 99999
};
在您的html中(通常我会使用{{}}来打印变量,但是我在laravel上,所以我改用<%%>
<md-button aria-label="Édit" class="md-fab md-raised md-mini">
<md-tooltip md-direction="top" md-z-index="<% btnOptions.zIndex %>">Mode édition</md-tooltip>
<i class="far fa-edit"></i>
</md-button>