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

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

转载作者：行者123 更新时间：2023-12-01 07:52:21

我正在使用最新版本的 Foundation，并尝试在我的网站上实现他们的工具提示功能。我直接从 their webpage on Tooltips 复制并粘贴了他们的示例但这不起作用。我已链接到他们在同一网页上指示的所有文件，并且在控制台中没有收到任何错误。出现的唯一工具提示是浏览器默认设置(在 Chrome、Firefox 和 Safari 中测试)。基金会的工具提示在他们的网站上运行良好——我在我的网站上做错了什么？如果您需要查看我的 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>$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>

最佳答案

你还没有initialized Foundation's JavaScript - 在脚本的顶部或底部添加以下内容:

$(document).foundation();

CodePen link

关于jquery - 基础工具提示不起作用；而是显示默认浏览器工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28261262/

文章推荐： r - 从与变量匹配的另一列中查找值

文章推荐： python - 我们可以改变训练模型中的 input_length 吗？

文章推荐： python - 从另一个模型获取公司列表以及员 worker 数

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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