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=".11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
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./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
-
Include latest
jqueryversion – Nenad Vracar Commented Nov 16, 2015 at 15:24 - It is working jsfiddle/2Lzo9vfc/91 – Nenad Vracar Commented Nov 16, 2015 at 15:25
- i don't get it. This is making me like really mad – Johannes Getzner Commented Nov 16, 2015 at 15:26
- 1 You use jQuery on document ready to call your code, but you do it before jQuery is loaded. Therefore it won't execute. Put jQuery script first, then your custom code after. Where you want to put your bootstrap script(before/after custom code) is optional. – turbopipp Commented Nov 16, 2015 at 15:37
- i still get the same result – Johannes Getzner Commented Nov 16, 2015 at 15:46
3 Answers
Reset to default 6Try 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./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>
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' })
https://stackoverflow./a/31811884/3511012
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.