我有一个 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 is not a function。此外，document.ready 函数位于我的 View 的最底部。 View 或其布局中的任何位置都没有其他 document.ready 函数。该包在我的 View 的顶部被调用，如下所示:
@Scripts.Render("~/bundles/modernizr", "~/bundles/jquery", "~/bundles/flot")
最佳答案
简单地说，您尝试做的事情是有效的。为了证明这一点，请尝试以下操作:
设置您的 _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>
然后，在 View (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...；您会看到我在示例中提供的自定义部分“页脚” - 首先尝试使用 CDN 对其进行调试，看看是否可以正常运行；然后你可以专注于 BundleConfig
- 最后一个提示是确保有足够的“视觉空间”来显示工具提示(在您的例子中是在按钮上方)
关于jquery - Bootstrap 工具提示不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25021265/