2

これは私を絶対に狂わせています、そしてそれは実装するのがとても簡単なことのようです。ツールチップ（または、さらに言えば、ポップオーバー）を機能させることができません。'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でも同じ動作がするので、ブラウザ固有ではないかと思います。

4

4 に答える 4

9

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>
于 2012-11-06T12:11:19.407 に答える
4

application.jsコードは、Webページがブラウザーに完全に読み込まれる前に実行されるため、ページが読み込まれる前にコード行で要素が検出されることはありません。

DOMが完全にロードされたら実行する必要があります。

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

これに対する解決策は2つありました。

  1. $コード内のをに変更しjQueryます。これにより、「オブジェクト＃にはメソッド'ready'がありません」というエラーがなくなりました。

  2. 無関係なコードを含むbootstrap.js.coffeeファイルがありました。ファイルを削除すると、すべてが再び機能し始めました。これにより、「Uncaught TypeError：Cannot call method'tooltip'ofnull」エラーが解消されました。

于 2012-06-14T14:12:13.027 に答える
1

多くの戦いの後、Rails 3.2で正しく動作させるために、私は次のことをしなければなりませんでした。

  1. application.js内：

    //=ブートストラップが必要

  2. ツールチップが必要なビューテンプレートに、rel='tooltip'属性を含めます。

    = link_to "リンクテキスト"、タイトル：'クリックしてトラックを表示'、'データ配置'=>'トップ'、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にはこれを含むcoffeescriptファイルが含まれています：

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

このファイルを呼び出す場合、これは同じことを行うため、上記の他のコーヒースクリプトファイルを含める必要はありません。私の場合、すでにbootstrap.js呼び出してapplication.jsいるので、これは呼び出されませんでした（require_treeを削除したので、必要なファイルを必要な順序で呼び出すことができます）。

于 2013-04-22T14:54:45.520 に答える