Как добавить всплывающие подсказки с boostrap и рельсы - PullRequest
Новая
       10

Как добавить всплывающие подсказки с boostrap и рельсы

0 голосов
/ 06 июня 2019

Мои друзья и я работаем над сайтом, используя 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>

В консоли вижу ошибку:

Ошибка: ИНСТРУМЕНТ: опция «размещение» предоставила тип «неопределенный», но ожидаемый тип «(строка | функция)». 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), а затем ошибка изменилась на:

Ошибка: ИНСТРУМЕНТ: опция «размещение» предоставила тип «неопределенный», но ожидаемый тип «(строка | функция)». util.js: 142: 11
typeCheckConfig util.js: 142
_getConfig tooltip.js: 638
Подсказка tooltip.js: 130
_jQueryInterface tooltip.js: 694
JQuery 2 _jQueryInterface tooltip.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

Ошибка возникает только тогда, когда я помещаю HTML-тег с data-toggle = "tooltip", независимо от того, помещаю ли я в него размещение данных или нет.

У меня та же проблема, когда я загружаю оригинальный шаблон / тему локально, ничего не трогая

Если вы когда-либо сталкивались с этой проблемой, пожалуйста, помогите.

Как следует из комментария, который внезапно исчез, я попытался добавить 

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

Я заметил ошибку в консоли браузера ($ не определен), я обнаружил, что jquery не был подключен правильно. Теперь JQuery, кажется, работает, но все еще нет интересных подсказок.

...