2015-07-03 88 views
1

Bootstrap工具提示突然無法正常工作時出現問題。 他們被納入這樣的:Twitter Bootstrap tooltip()停止工作

//Gemfile 
gem 'bootstrap-sass', '~> 3.2' 

//application.js 
//= require jquery 
//= require bootstrap 

//application.sass 
@import "bootstrap" 

他們已被列入這樣在過去的一年沒有問題。 在開發工具中,我甚至可以獲得對jQuery元素的引用,開發工具的auto complete顯示tooltip()可用。

但是,當我在元素上調用tooltip()時,將鼠標懸停在此元素上時不會發生任何事情。

我在http://getbootstrap.com/上做了同樣的動作。

dev tools enter image description here

另一個奇怪的是,當我使用HTML屬性來觸發一個提示,像這樣:

//using Slim as an example 
a[href title="hello world" data-toggle="tooltip" data-placement="left"] My Link 

我得到一個提示,但風格是完全錯誤的 enter image description here

我檢查了工具提示並複製了此工具提示HTML:

<div role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" id="ui-id-15" style="position: relative; top: -483.25px; left: 0px; display: block;">   
<div class="ui-tooltip-content">hello world</div> 

我沒有工具提示相同的http://getbootstrap.com/

<div class="tooltip fade bottom in" role="tooltip" id="tooltip136998" style="top: 18263px; left: 492.984px; display: block;"> 

在底部

工具提示

的HTML甚至不同。我的工具提示沒有箭頭。

我使用Rails,上海社會科學院,角,引導通過「引導-Sass的寶石

+0

我想你的項目中有一些jQueryUI工具提示與引導程序的 –

回答

2

看起來你在你的項目中,與引導的衝突ĴQuery UI tooltip

要麼擺脫的jQuery UI的或者使用下面的解決方法(取決於您的庫加載順序):

// bootstrap -> workaround -> jQueryUI 
$.fn.bootstrapTooltip = $.fn.tooltip.noConflict(); 

// jQueryUI -> workaround -> bootstrap 
$.widget.bridge('uitooltip', $.ui.tooltip); 

UPD:請注意,如果你決定在你的項目中使用兩個庫,您可能還需要jQueryUI/Bootstrap $.fn.button的解決方法。

+0

衝突。這正是它的原因。謝謝。 –