緩存刷新后，頁面引導工具提示不起作用

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