Question

我现在试图完成这项工作已有一段时间了，我无法弄清楚什么是错的：

我的链接：

<%= link_to '#', tag, class: "tag-tooltip",
                    :data => {:toggle=>"tooltip"},
                    'data-original-title' => "Hey Whats up",
                    'data-placement' => 'right'%>

我的Javascript：

$('.tag-tooltip').tooltip();

但它不起作用......我缺少什么？

修改

如果我进入我的Chrome控制台并插入（ $（'。tag-tooltip'）。tooltip（）; ）它正在运行。

所以我猜js文件没有加载？（我检查了我的application.js，我要求一切。）

Answer 1

我发现包装有效：

$(document).on("ready page:change", function() {
  $('.tag-tooltip').tooltip();
});

<强>更新

$(document).on("turbolinks:load",function(){
  $('.tag-tooltip').tooltip();
})

使用vanilla JS

document.addEventListener("turbolinks:load", function() {
  $('.tag-tooltip').tooltip();
});

Answer 2

就我而言，问题是我在jquery-ui

之后加载bootstrap-sprockets

在application.js我改变了：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require jquery-ui

到

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require turbolinks
//= require bootstrap-sprockets

然后一切都开始了。

Answer 3

您需要在代码中添加一些脚本：

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(
      {container:'body', trigger: 'hover', placement:"right"}
    );   
  });

Ruby on Rails中的Bootstrap工具提示

3 个答案: