Bootstrap tooltip doesn't show style of the tooltip, only data

Remember also that Bootstrap Tooltip don't like jQuery UI (there are a few names conflict and 'tooltip' is one of them).

The solution is changing the script loading order: jQuery UI first, bootstrap.js after.


Here's a working template for you. My guesses as to what was wrong:

  1. jQuery always needs to come before bootstrap.js.
  2. If you don't have a local server running, you need to add the http: to the CDN addresses.
  3. You may have been trying to initialize the tooltip in the head tags. Problem is that the document probably wasn't ready.

The following works fine.

HTML:

<!DOCTYPE html>
<html lang="en">
  <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 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>
    $( document ).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
    });
    </script>
  </body>
</html>

Your problem is more than likely that you failed to initialize the tooltip correctly. Take a look at this bootply

The documents state:

enter image description here

HTML:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Jquery:

$("[data-toggle=tooltip").tooltip();
  1. Remember you only need bootstrap.min.css and bootstrap.js for the tooltip to work correctly.
  2. Remember to load scripts and style sheets using absolute URLs (add / in front of path).
  3. bootstrap depends on jquery, load jquery first.

Tags:

Javascript

Html

Jquery

Twitter Bootstrap

Recent Posts