我的工具提示在主页上工作得很好。在稍后由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>
为什么工具提示不显示我做错了什么?
这个问题是由于模态和工具提示的z-index。你可以试试这个
.tooltip {
z-index: 100000000;
}
可能是因为你应该在模式的内容已经插入到文档之后调用$('.tooltips').tooltip();
。
另一个解决方案是使用container选项将工具提示绑定到模态:
$('#modal').on('shown.bs.modal', function() {
console.log("modal show");
$('.tooltips').tooltip({
container: $(this)
});
});
如果你正在使用react,我有一个不同的答案成功。你所要做的要做的就是给父容器一个ref,然后在overlayTrigger组件中,你只需要将ref作为参数传递给容器。
import React, { Component } from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
class random extends Component {
constructor(props) {
super(props);
this.ref= React.createRef()
}
render() {
return (
<div ref={this.ref}>
<OverlayTrigger
placement="top"
container={this.ref}
overlay={
<Tooltip data-container="body">Some text</Tooltip>
}
>
<span className="d-inline-block">
<i className="mdi mdi-help-circle pointer"></i>
</span>
</OverlayTrigger>
</div>
);
}
}
也许这对某些人有所帮助:当需要使用ajax填充&在点击时显示引导模式(渲染视图)(调用下面的showModal(url, event));bootstrap工具提示和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'}
});
});
修复此行为的最佳方法是将此道具添加到您的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>