Bootstrap工具提示不起作用
[英]Bootstrap Tooltips Not Working
问题描述
I can't get my bootstrap tooltips to work, I've tried literally everything, multiple jQuery versions, multiple bootstrap versions, multiple code snippets (seen a lot of similar problems here on stackoverflow), javascript on the head and after the body, nothing seems to work ... 
我无法使用我的引导工具提示，实际上我已经尝试了所有方法，多个jQuery版本，多个引导程序版本，多个代码段（在stackoverflow上看到了很多类似的问题），头部和正文之后的javascript，似乎没有任何工作...
Here's my current code: 这是我当前的代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script>
$(function(){
$('[data-toggle=tooltip]').tooltip();
});
</script>
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Example">Tooltip</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</html>
3 个解决方案
解决方案1
1 已采纳 2015-12-29 00:15:21
You are trying to use jQuery before it has loaded. 您正在尝试使用jQuery，然后再加载。
If you look in the console, you will see the error: 如果您在控制台中查看，则会看到错误：
Uncaught ReferenceError:
$is not defined$
To resolve this, move your script tag after the jQuery library and the Bootstrap JS: 为了解决这个问题，将你的script标签jQuery库和自举JS 后 ：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function(){
$('[data-toggle=tooltip]').tooltip();
});
</script>
解决方案2
1 2015-12-29 00:21:09
Try to do it in this way: 尝试以这种方式做到这一点：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Example">Tooltip</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function(){
$('[data-toggle=tooltip]').tooltip();
});
</script>
</body>
</html>
解决方案3
0 2015-12-29 00:24:11
you have 2 problems over here: 您在这里有2个问题：
1) Initialize jquery first 1）首先初始化jQuery
2) You have an illegal (invisible) character inserted after your tooltip initialization. 2）您在初始化工具提示后插入了一个非法（不可见）字符。 It sucks I know, but you need to remove that char. 我知道这很糟糕，但是您需要删除该字符。
Following code should work 以下代码应该工作
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Example">Tooltip</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function() {
$('[data-toggle=tooltip]').tooltip();
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.