Question

89

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

rated 0 times [ 96] [ 7] / answers: 1 / hits: 32901 / 11 Years ago, mon, october 14, 2013, 12:00:00

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

This

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

enter

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elians

Add To Favorites

Follow

Total Points: 417

Total Questions: 87

Total Answers: 101

Location: Barbados

Member since Sun, Nov 27, 2022

2 Years ago

answered 11 Years ago leog · Accepted Answer

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