2

这让我非常疯狂，而且实现起来似乎很简单。我无法让工具提示（或者，就此而言，弹出窗口）起作用。我安装了“twitter-bootstrap-rails”gem，并生成了适当的 .js 和 .css 文件。

我认为这不是 JQuery 问题，因为我的网站上还有其他运行良好的 JQuery 功能。

这是一些相关的代码。

应用程序.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();

应用程序.css

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

我想为工具提示工作的代码

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

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

4

4 回答 4

9

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

应用程序.css

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

应用程序.js

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

和布局/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>
于 2012-11-06T12:11:19.407 回答
4

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

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

$(document).ready(function () {
  $('a').tooltip();
});
于 2012-06-13T00:16:20.620 回答
1

经过一番努力，为了让它在 Rails 3.2 中正常工作，我必须执行以下操作：

  1. 在 application.js 中：

    //= 需要引导

  2. 在我想要工具提示的视图模板中，包括 rel='tooltip' 属性：

    = link_to "链接文本", title: '点击显示曲目', 'data-placement' => 'top', rel: :tooltip

或者如果您不使用 HAML：

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

  1. 在任何咖啡脚本文件（我创建了一个新文件）中输入：

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

这行得通，虽然工具提示的样式不起作用，但我不知道为什么，但 javascript 似乎至少可以工作。

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

正如有人已经评论过的那样，bootstrap-sass 包含一个咖啡脚本文件，其中包含以下内容：

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

如果你调用这个文件，就不需要包含上面的另一个咖啡脚本文件，因为这个文件做同样的事情。在我的情况下，我已经bootstrap.js调用过，application.js所以没有调用这个（我删除了 require_tree 以便我可以按我想要的顺序调用我想要的文件）。

于 2013-04-22T14:54:45.520 回答
1

解决这个问题的方法有两个。

  1. $将代码中的更改为jQuery. 这摆脱了“对象#没有方法‘准备好’”的错误。

  2. 我有一个包含无关代码的 bootstrap.js.coffee 文件。当我删除文件时，一切又开始工作了。这消除了“Uncaught TypeError: Cannot call method 'tooltip' of null”错误。

于 2012-06-14T14:12:13.027 回答