CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Johannes Getzner
Johannes Getzner

Reputation: 61

Why are my bootstrap tooltips not working?

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>

Upvotes: 2

Views: 25116

Answers (3)

stackoverfloweth
stackoverfloweth

Reputation: 6917

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.com/a/31811884/3511012

Upvotes: 4

turbopipp
turbopipp

Reputation: 1255

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.

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 6

Related Questions