Ad

Bootstrap Tooltips Not Working

- 1 answer

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" target="_blank" rel="nofollow noreferrer" 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>
Ad

Answer

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>
Ad
source: stackoverflow.com
Ad