2

ブートストラップ 3.0 を使用する Rails 4.0 サイトがあります。ツールチップは表示されていますが、スタイルはありません。ブートストラップの例は、マークアップが次のようになることを示しています

<div class="tooltip">
  <div class="tooltip-inner">
  </div>
  <div class="tooltip-arrow"></div>
</div>

しかし、調べてみると、生成されたマークアップは、ブートストラップではなく jQuery のように見えます。

<div id="ui-tooltip-18 role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content">
</div>

これが私のapplication.jsです

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require twitter/bootstrap
//= require_tree .

ツールチップを呼び出す JavaScript は次のとおりです。

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

ページ上の私のマークアップは次のとおりです。

<h3>Verifications</h3>
<table>
  <% @verification_types.each do |type| %>
    <tr>
      <td><%= link_to "#{type.name}", '#', data: { toggle: "tooltip" }, title: "Default title" %></td>
    </tr>
  <% end %>
</table>
4

3 に答える 3

3

私はこの方法が嫌いですが、うまくいきました。fix_tooltip.js という名前の js ファイルを追加し、これを追加する必要がありました。これを$.fn.bstooltip = $.fn.tooltip;呼び出しtooltipているスクリプトでは、$('[data-toggle]').bstooltip();本当にハッキーな感じがして気に入りません。しかし、jQuery-UI ツールチップを変更しても機能しませんでした。

于 2013-11-13T20:38:51.293 に答える
2

私は次の実用的な解決策になりました：

アプリケーション.js

//= require jquery
//= require bootstrap
//= require fix_conflict
//= require jquery.ui.all
//= require jquery_ujs
//= require others
//= require_tree .

fix_conflict.js (@covard に感謝)

$.fn.bstooltip = $.fn.tooltip;

その他.js

$('.form a').bstooltip();
#IMPORTANT: Make sure to target the exact element on which the tooltip is defined

HTML

<form class='form' ...>
  ...
  <a href='#' data-toggle='tooltip' title="some tooltip text>?</a>
  ...
 </form>

重要: 前述のように、ツールチップが定義されている正確な要素をターゲットにすることが重要です。それ以外の場合、一般的なターゲティング$('.form').bstooltip()を使用すると、JQuery のスタイリング/ツールチップになってしまいました

于 2014-04-30T06:39:17.090 に答える
0

@tamersalama の回答は、簡単な解決策を見つけるのに役立ちました。

すべての jquery-ui プラグインを含めるのではなく、必要なものだけを含めます (tooltip プラグインを除く)

ここに私のapplication.jsがあります：

//= require jquery
//= require jquery-ui/autocomplete
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require bootstrap
//= require_tree .
于 2014-12-12T08:57:41.547 に答える