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

Question

我和我的同伴正在使用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似乎可以正常运行，但是仍然没有很酷的工具提示。