javascript - 缓存刷新页面后 Bootstrap 工具提示不起作用

Question

我刚刚通过 Bootstrap 为我的 Web 元素创建了一些工具提示，但它无法正常工作。每当我缓存刷新我的页面时，它就会停止工作。每当我转到我的 Sublime 文本编辑器并单击“全部保存”并定期刷新页面时，它就会开始完美运行。不太明白是不是页面加载时间的问题。这是我处理工具提示的代码:

 $('.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(); 
});

我还有一个关于这些工具提示的问题，每当它起作用时，我都会弹出几个意想不到的箭头。

在工具提示的左下角有一个小箭头，我不知道如何去掉它。如果我有特殊字符，我检查了我的其他代码，但我找不到任何。这是我的 .css 代码:

 <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