导轨引导工具提示样式不起作用
Rails bootstrap tooltip style not working
我有一个使用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>
这是我的应用程序.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>
我讨厌这种方式,但我让它工作了。我必须添加一个 js 文件,我fix_tooltip.js 它叫它并将其添加到$.fn.bstooltip = $.fn.tooltip;
其中,然后在我的脚本中调用它现在tooltip
$('[data-toggle]').bstooltip();
感觉真的很笨拙,不喜欢它。但是我无法通过更改jQuery-UI工具提示来使其工作。
我最终得到了以下工作解决方案:
应用.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 样式/工具提示
@tamersalama的回答帮助我想出了一个简单的解决方案:
不要包含所有 jquery-ui 插件,而只包含您需要的插件(减去工具提示插件)
这是我的应用程序.js:
//= require jquery
//= require jquery-ui/autocomplete
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require bootstrap
//= require_tree .
相关文章:
- .clone().appendTo-替换不起作用的元素样式
- 更改标题样式在 Chrome 中不起作用
- 样式绑定不起作用
- 为不同的屏幕分辨率加载css样式的Javascript不起作用
- 重置样式继承在shadow-dom中不起作用
- Javascript:保存和恢复样式状态在IE中不起作用
- internetexplorerjavascript样式.高度不起作用
- Jquery 在 ASP 文本框上添加样式不起作用
- html可见性样式;不起作用
- 导轨引导工具提示样式不起作用
- 检测样式表是否无法加载(在 Firefox 上不起作用)
- 以悬停工具提示样式的子导航为中心不起作用
- 更改网站的样式代码以允许用户更改大小和样式不起作用
- 样式<输入类型=“范围”>用于重定向,在触摸设备上不起作用
- 在第二次加载时更改 iframe 样式,在 Internet Explorer 9 中不起作用
- 样式 z 索引不起作用
- jQuery样式在React Component中不起作用
- 定位内联样式与 jquery 不起作用
- 织物 js 粗斜体不起作用,因为 JSON 中的字体样式对象
- CSS 样式不起作用,js.