Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/79.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Rails引导工具提示样式不起作用_Javascript_Jquery_Css_Ruby On Rails_Twitter Bootstrap - Fatal编程技术网

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

Javascript Rails引导工具提示样式不起作用,javascript,jquery,css,ruby-on-rails,twitter-bootstrap,Javascript,Jquery,Css,Ruby On Rails,Twitter Bootstrap,我有一个使用Bootstrap3.0的Rails4.0站点。工具提示正在显示,但没有样式。引导示例显示标记如下所示 <div class="tooltip"> <div class="tooltip-inner"> </div> <div class="tooltip-arrow"></div> </div> 下面是我调用工具提示的JavaScript $(function(){ $('[data-togg

我有一个使用Bootstrap3.0的Rails4.0站点。工具提示正在显示,但没有样式。引导示例显示标记如下所示

<div class="tooltip">
  <div class="tooltip-inner">
  </div>
  <div class="tooltip-arrow"></div>
</div>
下面是我调用工具提示的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>
验证

我讨厌这种方式,但我让它起作用了。我不得不添加一个名为fix_tooltip.js的js文件,并将其添加到
$.fn.bstooltip=$.fn.tooltip
然后在调用
工具提示的脚本中,它现在执行
$(“[数据切换]”).bstooltip()它感觉非常粗糙,不喜欢它。但我无法通过更改jQuery UI工具提示使其工作。

我最终得到了以下工作解决方案:

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require twitter/bootstrap
//= require_tree .
//= require jquery
//= require bootstrap
//= require fix_conflict
//= require jquery.ui.all
//= require jquery_ujs
//= require others
//= require_tree .
fix_conflict.js(感谢@covard)

others.js

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


...
...

重要:如上所述-针对定义工具提示的确切元素非常重要。否则,当使用通用目标时,
$('.form').bstooltip()
我最终得到了JQuery样式/工具提示

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

不要包含所有jQueryUI插件,只包含您需要的插件(不包括工具提示插件)

下面是我的application.js:

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

你有jQueryUI吗?jQuery没有工具提示。是的,我有,它包含在应用程序中的这一行
/=require jQuery\u ujs
中。js可能有一种方法可以确定它的范围,但您也可以在没有工具提示()的情况下构建自定义jQueryUI包。我之前尝试过使用它,但它仍然生成相同的标记。除非我把它放错地方了。谢谢!这帮助我找到了一个简单的解决方案:-)
$('.form a').bstooltip();
#IMPORTANT: Make sure to target the exact element on which the tooltip is defined
<form class='form' ...>
  ...
  <a href='#' data-toggle='tooltip' title="some tooltip text>?</a>
  ...
 </form>
//= require jquery
//= require jquery-ui/autocomplete
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require bootstrap
//= require_tree .