CODEWITHSUNDEEP
javascriptzurb-foundation
Zaffiro
Zaffiro

Reputation: 4934

foundation 3.1 tooltips are not displaying

I am trying to get the foundation 3 tooltips to display but when I mouse over the span element it displays the standard tool tip.

enter image description here

I am referencing the following js files 

<script src="/js/jquery-1.8.2.min.js" type="application/javascript"></script>   
<script src="/js/modernizr.foundation.js"  type="text/javascript"></script>
<script src="/js/app.js"  type="text/javascript"></script>
<script src="/js/jquery.foundation.forms.js"  type="text/javascript"></script>
<script src="/js/jquery.foundation.tooltips.js"  type="text/javascript" ></script>

Element: 

<span class="has-tip tip-top noradius" data-width="210" title="Bottom and the default position.">Your Target Price</span>

Do I need to initialize the code first?

Upvotes: 0

Views: 1353

Answers (2)

Ed Charbeneau
Ed Charbeneau

Reputation: 4634

The scripts are being referenced in the wrong order. app.js should always appear last since it initializes the plugins.

<script src="/js/jquery-1.8.2.min.js" type="application/javascript"></script>   
<script src="/js/jquery.foundation.forms.js"  type="text/javascript"></script>
<script src="/js/jquery.foundation.tooltips.js"  type="text/javascript" ></script>
<script src="/js/app.js"  type="text/javascript"></script>

Also modernizr.js should be in the <head>.http://modernizr.com/docs/#installing

<script src="/js/modernizr.foundation.js"  type="text/javascript"></script>
</head>

Upvotes: 2

Manak Kapoor
Manak Kapoor

Reputation: 982

You may have forgotten to reference the all important style sheets(foundation.min.css), add this to the top of your page where you reference you javascripts:

  <link rel="stylesheet" href="/stylesheets/foundation.min.css"/>
  <link rel="stylesheet" href="/stylesheets/app.css"/>

Also you should update to Zurb-Foundation 3.2

Upvotes: 1

Related Questions