如何使用Boostrap和Rails添加工具提示

时间:2019-06-06 12:41:24

标签: ruby-on-rails assets

我和我的同伴正在使用Ruby on Rails在一个网站上工作。 我们设法插入了名为Boomerang的引导程序主题。 我想我已经弄清楚了我们的资产运作情况,但是我有一个我无法理解的错误。

页脚中有一些带有工具提示的社交图标,当您将其悬停时,应显示这些图标。但是它们没有显示。这是我用来显示图标的HTML代码:

<a href="https://www.facebook.com/webpixels/" class="facebook" target="_blank" 
  data-toggle="tooltip" data-placement='top' title='title' 
  data-original-title="Facebook">
  <i class="fa fa-facebook"></i>
</a>

在控制台中,我看到一个错误:

  

错误:TOOLTIP:选项“ placement”提供的类型为“ undefined”,但预期的类型为“(string | function)”。 bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js:7:2581       typeCheckConfig http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7       _getConfig http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7       我http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7       _jQueryInterface http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7       jQuery 2       _jQueryInterface http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7        http://localhost:3000/assets/boomerang.self-e1e63791e18eaede171d51277b9a09fe35d859c9a0314d67c65f3765dad80563.js?body=1:900       jQuery 2

错误似乎来自一个文件(bootstrap.min.js),因此我尝试链接整个文件(bootstrap.js),然后错误更改为:

  

错误:TOOLTIP:选项“ placement”提供的类型为“ undefined”,但预期的类型为“(string | function)”。 util.js:142:11
      typeCheckConfig util.js:142
      _getConfig tooltip.js:638
      工具提示tooltip.js:130
      _jQueryInterface工具提示.js:694
      jQuery 2       _jQueryInterface工具提示.js:685
       boomerang.self-e1e63791e18eaede171d51277b9a09fe35d859c9a0314d67c65f3765dad80563.js:900
      jQuery 2

似乎另一个文件引起了我的错误,但我不明白为什么。我以为js文件实际加载的顺序可能有问题。

我的javascript.js清单文件看起来像:

//= require jquery/jquery.min
//= require popper/popper.min
//= require bootstrap/js/bootstrap
//= require slidebar/slidebar
//= require classie
//= require bootstrap-notify/bootstrap-growl.min
//= require scrollpos-styler/scrollpos-styler
//= require adaptive-backgrounds/adaptive-backgrounds
//= require countdown/js/jquery.countdown.min
//= require dropzone/dropzone.min
//= require easy-pie-chart/jquery.easypiechart.min
//= require fancybox/js/jquery.fancybox.min
//= require flatpickr/flatpickr.min
//= require flip/flip.min
//= require footer-reveal/footer-reveal.min
//= require gradientify/jquery.gradientify.min
//= require headroom/headroom.min
//= require headroom/jquery.headroom.min
//= require input-mask/input-mask.min
//= require instafeed/instafeed
//= require milestone-counter/jquery.countTo
//= require nouislider/js/nouislider.min
//= require paraxify/paraxify.min
//= require select2/js/select2.min
//= require sticky-kit/sticky-kit.min
//= require swiper/js/swiper.min
//= require textarea-autosize/autosize.min
//= require typeahead/typeahead.bundle.min
//= require typed/typed.min
//= require vide/vide.min
//= require viewport-checker/viewportchecker.min
//= require wow/wow.min
//= require isotope/isotope.min
//= require imagesloaded/imagesloaded.pkgd.min
//= require boomerang

无论是否放置数据放置,仅当我使用data-toggle =“ tooltip”放置HTML标记时,才会发生错误。

在本地加载原始模板/主题时,我碰到同样的问题

如果您遇到此问题,请提供帮助。

如突然消失的评论所建议,我尝试添加

$(function(){
  $('[data-toggle="tooltip"]').tooltip(); 
});

我注意到浏览器控制台出现错误(未定义$),我发现jquery的插入不正确。现在,jquery似乎可以正常运行,但是仍然没有很酷的工具提示。

0 个答案:

没有答案