Search code examples
javascriptjquerycsstwitter-bootstraptooltip

How to make the Bootstrap 3 tooltip appear the same as in the documentation

On Twitter Bootstrap 3, when you look at the Tooltip it appears like the one below.

This is what appears on the Documentation

When I tried doing it. This is how the tooltip appears.

enter image description here

This is the code I used.

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

Update

This is my JS code

$('#tooltip1').tooltip('options')
Solution

  • You need to put the Tooltip on left in data-original-title="Tooltip on left" and id="tooltip1" to match your script.

    <button id="tooltip1" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="Tooltip on left">
    Tooltip on left
</button>

    It was not working because your script references an id that you did not have and 'option' as a string. options should be blank or something like 'show' or 'hide' but in your case it will work blank.

    change:

    $('#tooltip1').tooltip('options')

    to:

    $('#tooltip1').tooltip();

    be sure to include the semi-colon.

    UPDATE: Here is a simple example

    <html lang="en">
    <head>
        <title>
            Bootstrap Tool-Tip preview
        </title>
        <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"> 
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-md-offset-6">
                    <button data-original-title="Tooltip on left" data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" id="tooltip1">
                        Tooltip on left 
                    </button>
                </div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
        <script id="bsJs" type="text/javascript">
        $(document).ready(function() {
            $('#tooltip1').tooltip();
        });
        </script> 
    </body>
</html>

    See Example: bootply