Bootstrap Tooltip 显示在模态 MVC 5 后面

Posted 2023-05-08

【中文标题】Bootstrap Tooltip 显示在模态 MVC 5 后面

【英文标题】：Bootstrap Tooltip showing behind modal MVC 5

【发布时间】：2016-05-04 09:28:43

【问题描述】：

我无法让我的引导工具提示在我的模态中正确显示。

我有一个 MVC 站点，我有时会在其中使用 Ajax 加载部分视图并将它们显示在模态中。当用户单击按钮时，我执行获取并使用 html 更新模态正文。 我的代码包含我当前的测试，以使 Modal 正确显示。

        $.ajax(
        url: url,
        type: 'GET',
        success: function (response) 
            $('#modal-Levering-body').html(response);

            var button = $('#UdleveringVHButton');
            button.attr('value', 'Found the button');
            button.tooltip( container: '#modal-Levering-body' );
        

我的按钮在我的视图中定义为

        <input type="button" id="UdleveringVHButton" value="Udlevering VH" class="btn btn-xs" title="Sæt alle varer til Udlevering Varehus"
           data-tooltip="yes" data-placement="top" />

这是我用鼠标点击“找到按钮”按钮时的结果

奇怪的是，当我在 JSFiddle 上尝试这个时，它工作得很好 http://jsfiddle.net/z6qqvycf/

我的调试受到限制，因为我不知道如何检查工具提示。它在 Chrome 开发工具中不可见。

我也看过Bootstrap tooltip showing behind modal window，但这并没有影响我的情况。

关于如何调试和修复这种情况有什么建议吗？

编辑：

找到有关如何检查工具提示的指南：

Freeze screen in chrome debugger / DevTools panel for popover inspection?

EDIT2：

我发现我的 Tooltip 与我的 JSFiddler 完全不同 JSFiddler

我的 MVC 设置

不知何故，.tooltip 函数在我的设置中生成的东西与在我的 JSFiddler 中完全不同。目前不知道为什么。

编辑 3

在.tooltip()函数上发现Bootstrap和JQUery UI有冲突。 我上次加载的是 JQuery UI，所以它赢了。

我颠倒了加载顺序，现在一切正常 jQueryUI Tooltips are competing with Twitter Bootstrap

【问题讨论】：

检查该 div 的 z-index

如何检查那个 div 的 Z-index？它在 Chrome 开发人员窗格中不可用。当我将鼠标从按钮的鼠标悬停上移开时，工具提示消失

尝试在.tooltip风格上查看bootstrap.css

尝试添加 data-container="body" （例如 html body 元素）或对话框中的任何 id。我猜 data-container="modal-Levering-body"。

【参考方案1】：

在.tooltip()函数上发现Bootstrap和JQUery UI有冲突。我上次加载的是 JQuery UI，所以它优先。

我颠倒了加载顺序，最后加载了 Bootstrap JS 文件，现在一切正常。