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

缓存刷新后，页面引导工具提示无法正常工作

1 个答案: