Question

我遇到了一些bootstrap的问题，我试图使用Modal，Popover或tooltip之类的东西，

但有些错误是：模态：背景覆盖在模态上方（使包括模态更暗的所有内容） Tooptip：忽略它的对齐方式，如顶部。 Popover：根本不工作。我将bootstrap的例子直接复制到我的网站上，但仍然无效。

我将包含需求代码：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
   <link rel="stylesheet" href="http://data.[CENSORED].net/css/flat-ui.css">
   <link rel="stylesheet" href="http://data.[CENSORED].net/css/custom.css">
 
<!-- Jscript collection -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- /Jscript collection -->

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

我使用最新的引导程序JS和最新的JQuery。

我没有包含整个源代码，因为它不需要，你只需要我使用的东西（工具提示和弹出框），它只需要Jquery部分。

很难解释，但是。是的。

Answer 1

从示例代码中，您未包含 CSS ，这对于将工具提示设置为position: absolute至关重要。此外，您还需要自己明确初始化工具提示，data-toggle示例只是建议您如何处理它：

出于性能原因，Tooltip和Popover data-apis是选择加入的，这意味着您必须自己初始化它们。初始化页面上所有工具提示的一种方法是通过数据切换属性选择它们：

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

（source）

工作代码

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
   <link rel="stylesheet" href="http://data.[CENSORED].net/css/flat-ui.css">
   <link rel="stylesheet" href="http://data.[CENSORED].net/css/custom.css">
 
<!-- Jscript collection -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
  $(function () {
    $('[data-toggle="tooltip"]').tooltip({
      placement: "bottom"
    });
  });
  $(function () {
    $('[data-toggle="popover"]').popover({
      placement: "bottom"
    });
  });
</script>

<!-- /Jscript collection -->

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Bootstrap JS窃听了......？

1 个答案: