Question

这让我绝对疯狂，实施起来似乎很简单。我无法获得工具提示（或者，就此而言，弹出窗口）。我安装了'twitter-bootstrap-rails'gem ，并生成了相应的.js和.css文件。

我不认为这是一个JQuery问题，因为我的网站上有其他JQuery功能可以完美运行。

这是一些相关的代码。

的application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-tooltip
//= require bootstrap-popover
//= require prototype
//= require prototype_ujs
//= require effects
//= require dragdrop
//= require controls
//= require_tree .
$('a').tooltip();

application.css

 *= require_self
 *= require_tree .
 *= reqire_twitter/bootstrap

代码我想开始使用工具提示

<a href="#" title="test" rel="tooltip" id="test-url">test</a>

以上代码悬停时，只显示Chrome正常的工具提示。我在Safari中遇到了相同的行为，所以我怀疑它是特定于浏览器的。

Answer 1

我正在使用Rails 3.2.7，手动添加Bootstrap。一切正常。

<强> application.css

*= require style
*= require bootstrap.min
*= require bootstrap-responsive.min
*= require_tree .

<强>的application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap.min
$(document).ready(function(){
    $('a').tooltip();
});
//= require_tree .

和 layout / application.html.erb

<head>
  <%= stylesheet_link_tag("application", :media => "all") %>
</head>
<body>
<%= yield %>
  <!-- scripts concatenated and minified via build script -->
  <%= javascript_include_tag "application" %>
  <!-- end scripts -->
</body>
</html>

Answer 2

您的application.js代码将在您的网页完全加载到浏览器之前执行，因此您的代码行在页面加载之前将找不到任何元素。

您需要在DOM完全加载时执行：

$(document).ready(function () {
  $('a').tooltip();
});

Answer 3

对此的解决方案是双重的。

将代码中的$更改为jQuery。这摆脱了“对象＃没有方法'准备好'”错误。
我有一个bootstrap.js.coffee文件，其中包含不相关的代码。当我删除文件时，一切都开始了。这摆脱了“Uncaught TypeError：无法调用方法'工具提示'的null”错误。

Answer 4

经过多次战斗，为了让它与Rails 3.2一起正常工作，我必须做到以下几点：

：

// = require bootstrap
在我想要工具提示的视图模板中，包含rel ='tooltip'属性：

= link_to“链接文字”，标题：'点击以显示曲目'，'数据展示位置'=＆gt; 'top'，rel :: tooltip

或者如果你没有使用HAML：

<a href="#" data-placement="top" rel="tooltip" title="Click to reveal tracks">Link text</a>

在任何一个coffeescript文件中（我创建了一个新文件）放了这个：

jQuery - ＆gt;
$（ '[相对= “工具提示”]'）。工具提示（）

虽然工具提示的样式不起作用，但我无法弄清楚原因，但javascript似乎至少起作用了。

希望这会对其他人有所帮助。

正如有人已经评论过，bootstrap-sass包含一个coffeescript文件，其中包含：

jQuery ->
  $("a[rel=popover]").popover()
  $(".tooltip").tooltip()
  $("a[rel=tooltip]").tooltip()

如果您调用此文件，则无需包含上面的其他coffeescript文件，因为此文件执行相同的操作。在我的情况下，我已经从bootstrap.js调用了application.js，因此没有调用这个（我删除了require_tree，所以我可以按照我想要的顺序调用我想要的文件）。

Rails 3：Twitter-Bootstrap工具提示拒绝工作

4 个答案: