Why are my bootstrap tooltips not working?
Question
Bevor i use a plugin for Bootstrap i always test it before. This is why my html is so simple. It would be great if you could help me out with my tooltips.
Ps: i am really new to coding Websites
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Basis-Vorlage</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip links">Tooltip links</button>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
3 answers
solution1
6 ACCPTED 2015-11-16 15:30:32
Try this code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Basis-Vorlage</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip links">Tooltip links</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
solution2
4 2015-11-16 15:27:36
my first attempt to resolve bootstrap tooltip issues is to change the selector
$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
});
it's also possible that the tooltip is working, but isn't placed in front of your div
.tooltip({ container: 'body' })
solution3
0 2015-11-16 15:32:31
Why are my bootstrap tooltips not working?
Because you initialize the jquery and bootstrap scripts after the code where you try to initialize the tooltip via jQuery. Swap them around. Scripts first, then your custom code.
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.