Question

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

＆＃13;

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

＆＃13;

<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>$10 per tune-up</td>
          </tr>
          <tr>
            <td>Troubleshooting</td>
            <td>$15 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.">$10 per session</span>
            </td>
          </tr>
          <tr>
            <td>Data recovery</td>
            <td>$20 per hour or $5 per file, whichever is cheaper</td>
          </tr>
          <tr>
            <td>Upgrade or app consultation</td>
            <td>$10 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>

＆＃13;

Answer 1

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

$(document).foundation();

CodePen link

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

1 个答案: