CODEWITHSUNDEEP
jqueryhtmltooltipzurb-foundation
Andrew
Andrew

Reputation: 67

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

I am using the latest version of Foundation and am attempting to implement their Tooltips feature on my site. I have directly copied and pasted their example from their webpage on Tooltips but it doesn’t work. I’ve linked to all the files they instructed at the same webpage, and I get no errors in the console. The only tooltip that appears are the browser defaults (tested in Chrome, Firefox, and Safari). Foundation’s tooltips work fine at their site — what have I done wrong at mine? Please let me know if you need to see my CSS or more of my HTML — I tried to keep it as brief as possible.

$(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>

Upvotes: 1

Views: 784

Answers (1)

Knut Holm
Knut Holm

Reputation: 4162

You haven't initialized Foundation's JavaScript - add at the top or bottom of your script this:

$(document).foundation();

CodePen link

Upvotes: 3

Related Questions