尽管设置了容器,Bootstrap 3.3.5工具提示总是显示在模态后面

时间:2018-05-31 19:18:16

标签: twitter-bootstrap twitter-bootstrap-tooltip

尽管看起来如此,尽管如此,这并不重复。使用bootstrap 3.3.5,我试图在独特的模态对话框中显示元素上的工具提示,但它们总是落后于模态对话框及其半透明背景。我已经按照别处给出的建议,设置了容器。事实上,我使用4种方法来设置容器无济于事:

  1. 使用标准标记属性:data-container=".modal-body"(和其他十几个可能的选择器,徒劳无功)。
  2. 使用工具提示功能的选项:container.find("[data-toggle='tooltip']").tooltip({ container: ".modal-body" });
  3. 通过jQuery data-container函数设置datacontainer.find("[data-toggle='tooltip']").data("container", ".modal-body").tooltip();
  4. 通过jQuery data-container函数设置attrcontainer.find("[data-toggle='tooltip']").attr("data-container", ".modal-body").tooltip();
  5. 有什么建议吗?人们可以建议通过CSS提升工具提示的z-index,但是通过半透明背景,我也观察到工具提示的定位并不完全正确。所以它不仅仅是z-index的问题。

    感谢您的帮助!

    PS这在所有浏览器中都是一致的。

2 个答案:

答案 0 :(得分:0)

每个BS文档

  

选择加入功能

     

出于性能原因,Tooltip和Popover data-apis是选择加入的,这意味着您必须自己初始化它们。

     

初始化页面上所有工具提示的一种方法是按照数据切换属性选择它们:

private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
    var r = CreateSquare(e.Location, 10);
}

编辑:修改为应用示例

定义的工具提示

  $(function () {
      $('[data-toggle="tooltip"]').tooltip()
  })
$('[data-toggle="tooltip"]').tooltip();

答案 1 :(得分:0)

经过详尽的调查后,我发现上面观察到的错误的工具提示放置在模态上是由于jQueryUI造成的干扰。简单省略jQueryUI可恢复模态上的工具提示。请注意,除了模态之外,jQueryUI不会损害页面上其他元素的工具提示。

感谢您抽出宝贵时间提供帮助。

相关问题