Bootstrap tooltip is not working on my web project

Question

I'm actually in a very weird situation and somehow can't be able to figure out what non-sense is happening to me. The situation is I'm actually implementing my bootstrap tooltip fine and I have checked it on the JsFiddle, it is working fine there too, however, after a lot of efforts, it is not getting implemented on the web project, I don't know why.

This is literally very weird. Here is my implementation which is working fine on JsFiddle.

And for the solutions I have done a lot of things but, unfortunately, all of them didn't work.

1. To take the class name into consideration

   <script type="text/javascript">
     $(document).ready(function (){
      $(".btn-secondary").tooltip()
     })
   </script>
   

2. To use the body element to target the data-toggle :

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

3. To use the container as body and focus on the section :

   <script type="text/javascript">
     $(document).ready(function (){
       $(".testimonial.home-page").tooltip({
         selector : '[data-toggle=tooltip]',
         container : 'body'
       })
     })
   </script>
   

This is what I'm getting on my web project:

Don't take me wrong, I'm really confused about why it ain't happening since everything is fine. Any ideas would be appreciated, I'm a noob and I know that you guys can help me on this.

EDITS

I have checked the console and got this error saying the .tooltip is not a function:

Answer 1

Try to call the Tooltip function in this way and pass the options as HTML attributes. You can check out some working examples here.

<button class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Basic tooltip">Hover me</button>

<script>
 $(function () {
  $('[data-toggle="tooltip"]').tooltip()
 });
</script>