基础工具提示不起作用。 关于这个主题有什么想法吗？

Question

基础工具提示不起作用。 我认为脚本的位置是错误的，但我无法弄清楚实际的问题是什么。 工具提示是否必须针对javascript进行初始化，还是仅基于CSS？

这是我放置在结束body标签上方的脚本

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

我已经解决了其他一些与此有关的问题，但是找不到正确的答案！

这是工具提示的html

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

Answer 1

如果您使用的是Foundation 4，我会看到您的页面中没有包含custom.modernizr.js和foundation.tooltips.js 。

Modernizr ：

在页面的顶部添加Modernizr。 Modernizr充当旧版浏览器的HTML5元素以及移动设备检测的填充程序。

请参阅： http : //foundation.zurb.com/docs/javascript.html和http://foundation.zurb.com/docs/components/tooltips.html

演示： http : //jsfiddle.net/IrvinDominin/4jaEa/

编辑

您的轨道函数不起作用，因为在animation选项之后缺少,并且必须在执行$(document).foundation()之前完成轨道设置。

码：

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

});

演示： http ： //jsfiddle.net/IrvinDominin/SdAkp/