CODEWITHSUNDEEP
javascriptjquerycsszurb-foundation
Wang'l Pakhrin
Wang'l Pakhrin

Reputation: 868

foundation tooltip is not working. Any idea on this subject?

the foundation tooltip is not working . I think the script placement is wrong but i could not figure out what the actual problem is. does the tooltip has to be initialized for javascript or is it based on CSS only?

this is the script i have placed just above the closing body tag

<script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>

  <script src="js/foundation.min.js"></script>
  <script src="../js/foundation/foundation.section.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>

<script>
  $(document).foundation();
  $(document).foundation('orbit', {
    animation: 'fade'
    timer_speed: 3000,
    pause_on_hover: false,
    resume_on_mouseout: false,
    animation_speed: 300,


  });

  $(".orbit-timer").hide();
  $(".orbit-slide-number").hide();
</script>

i have gone through other questions realated to this but could not find the right answers !

this is the html for tooltip

<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>

Upvotes: 4

Views: 3433

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

If you are using foundation 4 I see you have not included custom.modernizr.js and foundation.tooltips.js in you page.

Modernizr:

In the head section of your page add Modernizr. Modernizr acts as a shim for HTML5 elements for older browsers as well as detection for mobile devices.

See: http://foundation.zurb.com/docs/javascript.html and http://foundation.zurb.com/docs/components/tooltips.html

Demo: http://jsfiddle.net/IrvinDominin/4jaEa/

EDIT

Your orbit function not works because, there is a missing , after the animation option and the orbit setup must be done before the $(document).foundation() execution.

Code:

$(document).ready(function () {
        $(document).foundation('orbit', {
        animation: 'fade',
        timer_speed: 3000,
        pause_on_hover: false,
        resume_on_mouseout: false,
        animation_speed: 300
    });

    $(document).foundation();

    $(".orbit-timer").hide();
    $(".orbit-slide-number").hide();

});

Demo: http://jsfiddle.net/IrvinDominin/SdAkp/

Upvotes: 2

Related Questions