Rails 引导工具提示样式不起作用答案

【问题标题】：Rails bootstrap tooltip style not workingRails 引导工具提示样式不起作用
【发布时间】：2013-11-26 14:19:15
【问题描述】：

我有一个使用 bootstrap 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>

【问题讨论】：

你有 jQueryUI 吗？ jQuery 没有工具提示。
是的，我知道，它包含在 application.js 中的 //= require jquery_ujs 这一行中
可能有一种方法来确定它的范围，但您也可以构建一个没有 tooltip() 的自定义 jQueryUI 包。
stackoverflow.com/questions/13731400/…
我之前尝试过使用它，但它仍在生成相同的标记。除非我把它放在错误的部分。

标签： javascript jquery css ruby-on-rails twitter-bootstrap

【解决方案1】：

我讨厌这种方式，但我得到了它的工作。我必须添加一个名为 fix_tooltip.js 的 js 文件并将其添加到它 $.fn.bstooltip = $.fn.tooltip; 然后在我的脚本中调用 tooltip 它现在是 $('[data-toggle]').bstooltip(); 感觉真的很hacky并且不喜欢它。但我无法通过更改 jQuery-UI 工具提示来使其工作。

【讨论】：

【解决方案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;

others.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 样式/工具提示

【讨论】：

谢谢！这帮助我找到了一个简单的解决方案:-)

【解决方案3】：

@tamersalama 的回答帮助我找到了一个简单的解决方案：

不要包含所有 jquery-ui 插件，而只包含您需要的那些（减去工具提示插件）

这是我的 application.js：

//= require jquery
//= require jquery-ui/autocomplete
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require bootstrap
//= require_tree .

【讨论】：