1。确保在加载bootstrap.js之前加载jQuery.js.

Question

我有一个ASP.NET MVC 4项目，其中包含三个按钮，工具提示嵌入在名为“A”的div中：

<div class="A">
    <span></span>
    <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdfsdf" id="aButton">A</button>
    <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdljkfl" id="bButton">B</button>
    <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdljkfl" id="cButton">C</button>
</div>

在document.ready上，我称之为jQuery函数：

$(document).ready(function () {
    $('.A .btn').tooltip();
});

不显示工具提示。我检查我的BundleConfig以确保包含bootstrap.js：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.11.1.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*",
"~/Scripts/bootstrap-3.2.0-dist/js/bootstrap.js"));

是的，它就在那里。当我将光标悬停在按钮上时，为什么我的工具提示不显示？

编辑：控制台现在产生以下错误：TypeError：$（...）。tooltip不是函数。此外，document.ready函数位于视图的最底部。视图中的任何位置或其布局都没有其他document.ready函数。捆绑包在我的View的 top 处调用，如下所示：

@Scripts.Render("~/bundles/modernizr", "~/bundles/jquery", "~/bundles/flot")

Answer 1

简单地说，你正在努力做的事情。为了证明这一点，请尝试以下方法：

设置 _Layout.cshtml ：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>

    <div class="container">
        @RenderBody()
    </div>

    <!--
        Note: Register script bundles here...
        Just for the sake of getting it to work, I'm using CDN here
    -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <!-- Important: load page-specific scripts *after* the includes above -->
    @RenderSection("Footer", required: false)
</body>
</html>

然后，在视图（Home.cshtml）中：

@{
    ViewBag.Title = "Home";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container">
    <div class="A">
        <span></span>
        <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdfsdf" id="aButton">A</button>
        <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdljkfl" id="bButton">B</button>
        <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdljkfl" id="cButton">C</button>
    </div>
</div>

@section Footer {
    <script>
        $(document).ready(function () {
            $('.A .btn').tooltip();
        });
    </script>
}

这是复制/粘贴就绪并且可以正常工作。但是这里有一些事情需要考虑：

加载脚本后加载$(document).ready...;你会看到自定义部分＆＃34; Footer＆＃34;我在样本中提供了
首先尝试使用CDN进行调试，看看是否能让它正常工作;然后你可以专注于BundleConfig
最后一个提示是确保有足够的视觉空间＆＃39;显示工具提示（在您的情况下位于按钮上方）

Answer 2

我有同样的问题。我必须处理两个问题才能使Bootstrap 3.2 Tooltips工作。

1。确保在加载bootstrap.js之前加载jQuery.js.

2。检查容器和z-index。

似乎工具提示默认为元素内的z-index为0。它藏在我的主容器后面。强制工具提示进入更高的z-index（I.E. z-index：1;）对我有用。

将此添加到CSS并增加z-index，直到它变为可见。

div[role='tooltip'] {
    position:relative;
    z-index:1;
}

这个解决方案立即起作用，虽然我使用的是不同的框架（Zend / Magento 1.7.0.2）。

[edit]位置和z-index特定于我的情况（默认值从1060重置为0）。我不建议做同样的事情，除非代码执行正常并且您仍然无法看到工具提示。

Answer 3

请确保包括：

<script src="~/Scripts/umd/popper.js"></script>

或

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

如果您想使用CDN

Bootstrap工具提示不起作用

3 个答案:

1。确保在加载bootstrap.js之前加载jQuery.js.

2。检查容器和z-index。