Bootstrap Tooltips Not Working
Question
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 ...
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 answers
solution1
1 ACCPTED 2015-12-29 00:15:21
You are trying to use jQuery before it has loaded.
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 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>
solution2
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>
solution3
0 2015-12-29 00:24:11
you have 2 problems over here:
1) Initialize jquery first
2) You have an illegal (invisible) character inserted after your tooltip initialization. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.