CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraptooltip
lozadaOmr
lozadaOmr

Reputation: 2655

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')

Upvotes: 5

Views: 32884

Answers (3)

Daniel
Daniel

Reputation: 1

I couldn't get this to work for me either until I changed the $ to jQuery. Once I changed it, the default bootstrap tooltip showed properly for me. So do this in your Javascript:

<script type="text/javascript">
jQuery(document).ready(function() {
// Tooltip
        jQuery('[data-toggle="tooltip"]').tooltip();
});
</script>

I hope that helps someone out!

Upvotes: 0

hcoat
hcoat

Reputation: 2643

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

Upvotes: 11

jcry87
jcry87

Reputation: 44

You need the "data-placement" with value "left"

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

Remember to load the tooltip to all the place with data-toggle="tooltip", you need write with jQuery before of close the this sentence :

<script type="text/javascript">
$(document).ready(function() {
// Tooltip
        $('[data-toggle="tooltip"]').tooltip();
});
</script>

Upvotes: 1

Related Questions