After cache refreshing the page bootstrap tooltips is not working

Question

I just created some tooltips via Bootstrap for my web project, but It doesn't work properly. Whenever I cache refresh my page, It stops working. Whenever I go to my Sublime text editor and click Save All, and refresh the page regular, it starts working perfectly. I don't quite understand if it is because of the loading time of the page. Here is my code that takes care of my tooltips:

 $('.reg-joint').each(function(index,element)
{      
  var jointid = $(element).attr("id");
  var jointName = $(element).find('img').attr("alt");

  var description = "";

  if( typeof joints[index].description !== 'undefined' )
  {
    description = joints[index].description;       
  }      

  $(element).tooltip({
      animation:true,
      delay:{"show":100,"hide":100},
      html:true,
      placement:'top',
      trigger:'hover',
      title:description,

  });

$(element).tooltip(); 
});

I have another issue about these tooltips, whenever it works I got a couple of unexpected arrows pop out.

At the left bottom of the tooltips there is a mini arrow there and I don't know how i am going to get rid of it. I checked my other codes if I had a special character or not but I couldn't find any. Here is my .css codes for that:

 <style>      

      .tooltip{

        position: absolute;

      }

      .tooltip-inner {

        position: relative;
        max-width:400px;
        background: #ffffff;
        border: 3px solid #0CBC99;
        color: #0c76a0;
        font-size: 20px;
        text-align: left; 

      }

      .tooltip-inner:after, .tooltip-inner:before {

        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;

      }

      .tooltip-inner:after {

        border-color: rgba(86, 113, 176, 0);
        border-top-color: #ffffff;
        border-width: 10px;
        margin-left: -10px;

      }

      .tooltip-inner:before {

        border-color: rgba(157, 183, 199, 0);
        border-top-color: #0CBC99;
        border-width: 13px;
        margin-left: -13px;

      }

    </style>

Answer 1

$(element).tooltip(); 

出现两次，您可以在此处看到一个简单的教程： http : //www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php