基础工具提示不起作用；而是显示默认浏览器工具提示

Question

我正在使用最新版本的 Foundation 并试图在我的网站上实现他们的工具提示功能。我已经直接从 their webpage on Tooltips 复制并粘贴了他们的示例，但它不起作用。我已经链接到他们在同一网页上指示的所有文件，并且我在控制台中没有收到任何错误。出现的唯一工具提示是浏览器默认设置（在 Chrome、Firefox 和 Safari 中测试）。 Foundation 的工具提示在他们的网站上运行良好——我在我的网站上做错了什么？如果您需要查看我的 CSS 或更多 HTML，请告诉我 — 我尽量保持简短。

$(document).ready(function() {
  $("div.info div.troubleshoot").mouseenter(function() {
    $("div.icon.troubleshoot").addClass("tada animated");
  });
  $("div.info div.troubleshoot").mouseleave(function() {
    $("div.icon.troubleshoot").removeClass("tada animated");
  });
})
$(document).ready(function() {
  $("div.info div.security").mouseenter(function() {
    $("div.icon.security").addClass("tada animated");
  });
  $("div.info div.security").mouseleave(function() {
    $("div.icon.security").removeClass("tada animated");
  });
})
$(document).ready(function() {
  $("div.info div.maintenance").mouseenter(function() {
    $("div.icon.maintenance").addClass("tada animated");
  });
  $("div.info div.maintenance").mouseleave(function() {
    $("div.icon.maintenance").removeClass("tada animated");
  });
})

$(document).ready(function() {
  $(window).scroll(function() {
    var y = $(window).scrollTop();
    var splashHeight = $("div.one").height();
    var fade = splashHeight - 50
    if (y > fade) {
      $("nav").css("opacity", '0.95');
    } else {
      $("nav").css("opacity", '0.75');
    };
  });
})

<html>

<head>
  <title>DragonTech &mdash; Home</title>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet" type="text/css" />
  <link href="css/animate.css" rel="stylesheet" type="text/css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/normalize.min.css" rel="stylesheet" type="text/css" />
  <link href="css/app.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <nav>
    <ul>
      <li><a href="#top">Top</a>
      </li>
      <li><a href="#services">Services</a>
      </li>
      <li><a href="#price">Prices</a>
      </li>
      <li><a href="#">Appointment</a>
      </li>
    </ul>
  </nav>
  <div class="content" id="price">
    <h2>Our rates are affordable, understandable, and satisfaction-guaranteed.</h2>
    <div class="row">
      <div class="small-10 small-centered large-12 columns">
        <table>
          <thead>
            <tr>
              <th scope="column">Service</th>
              <th scope="column">Pricing</th>
            </tr>
          </thead>
          <tr>
            <td>General maintenance</td>
            <td> per tune-up</td>
          </tr>
          <tr>
            <td>Troubleshooting</td>
            <td> per hour</td>
          </tr>
          <tr>
            <td>Security assurance</td>
            <td><span data-tooltip aria-haspopup="true" class="has-tip" title="If security issues are identified, you may be charged slightly extra to compensate for the time spent restoring the computer."> per session</span>
            </td>
          </tr>
          <tr>
            <td>Data recovery</td>
            <td> per hour or  per file, whichever is cheaper</td>
          </tr>
          <tr>
            <td>Upgrade or app consultation</td>
            <td> per hour</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/vendor/jquery.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation/foundation.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/vendor/modernizr.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation/foundation.tooltip.min.js" type="text/javascript"></script>
  <script src="js/app.js" type="text/javascript"></script>
</body>

</html>

Answer 1

您还没有 initialized Foundation's JavaScript - 在脚本的顶部或底部添加：

$(document).foundation();

CodePen link

基础工具提示不起作用；而是显示默认浏览器工具提示

Foundation Tooltips aren’t working; instead show default browser tooltip

jquery

html

tooltip

zurb-foundation