0

Code as follows:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>My God Man Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link href="/Content/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/fontawesome/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>


    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="/Content/IE9FixScripts"></script>
;
    <![endif]-->
  </head>
  <body>
   <div id="wrap">
    <div class="container">

    <!-- Main content  any sections which need to be filld in and then body -->
    <div class="container">

        <div class="jumbotron">

    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h3>Home Page.</h3>
                <h4> Welcome GodMan, if you click on the above link where it says [Needs Role] and if it works then you are good else you see a custom 401 message.</h4>
            </hgroup>
        </div>
    </section>



    <!-- footer section here needs customisation.-->
    <div id="footer">
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <ul class="list-unstyled">
                        <li class="pull-right"><a href="#top">Back to top</a></li>
                        <li><a id="testingID" href="#"data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Left</a></li>
                        <li><a href="#"data-placement="right" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Right</a></li>
                        <li><a href="#"data-placement="bottom" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Bottom</a></li>
                        <li><a href="#"data-placement="top" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Top</a></li>
                        <li><a href="#"data-placement="left" data-toggle="popover" class="btn btn-default" type="button" data-original-title="Tooltip on left">PopOver</a></li>
                        <li><a href="#"data-placement="left" data-toggle="popover" class="btn btn-default" type="button" data-original-title="Tooltip on left">PopOver2</a></li>
                    </ul>
                </div>
            </div>
        </footer>
    </div>
    <!-- footer ends-->
  </div>
</div>
    <script src="/Scripts/jquery-2.0.3.js"></script>

    <script src="/Scripts/bootstrap.js"></script>


    <script type="text/javascript">
        $.ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover({trigger: "hover"});
            $('#testingID').tooltip('show');

            //$().tooltip({
            //    selector: "[data-toggle=tooltip]",
            //    container: "body"
            //})
        });
    </script>
  </body>
</html>

Looked at the other link which [https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips]

did what it says but ain't working.

what is the mistake what i am making.

am i forgetting to add a reference to something? or my JQuery verion is not good should i go back?

Tried the fiddler example with JQ 2.X edge on the example above mentioned in post. and it works there.

but not for me. Strange. it may be some thing really small. but cant seem to get it.

Any help is appreciated.

1 Answer 1

3

I made a JS fiddle based on your code which can be found here - http://jsfiddle.net/w2gTy/

For the jQuery dependency I used 2.0.2, hopefully that isn't the difference. That said, you were missing 'document' in your $.ready declaration. Without it the tooltips never appeared.

$(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
        $('[data-toggle="popover"]').popover({trigger: "hover"});
        $('#testingID').tooltip('show');

        //$().tooltip({
        //    selector: "[data-toggle=tooltip]",
        //    container: "body"
        //})
    });

That said, you could also even omit the $(document).ready() section and leave just the .tooltip initializers and that would work as well.

1
  • Thank you very much, i wasn't able to see wood for the tree's, I guess another pair of eyes would have definitely helped. Thank you once again. you did make my day. Nov 15, 2013 at 11:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.