Twitter Bootstrap tooltip（）停止工作

Question

Bootstrap工具提示出现问题突然无法正常工作。 他们被包括在内：

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

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

//application.sass
@import "bootstrap"

他们在过去一年中被包括在内，没有任何问题。 在开发工具中，我甚至可以获得对jQuery元素的引用，开发工具的auto complete显示tooltip()可用。

但是当我在元素上调用tooltip()时，将鼠标悬停在此元素上时 - 没有任何反应。

我在http://getbootstrap.com/上执行相同的操作。

另一个奇怪的事情是当我使用html属性来触发工具提示时，如下所示：

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

我确实得到了一个工具提示，但风格都错了

我检查了工具提示并复制了这个工具提示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甚至是不同的。我的工具提示没有箭头。

我通过'bootstrap-sass'宝石使用Rails，sass，Angular，bootstrap

Answer 1

您的项目中的j Query UI tooltip看起来与Bootstrap有冲突。

要么摆脱jQuery UI或使用以下变通方法（取决于你的库加载顺序）：

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

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

UPD：请注意，如果您决定在项目中使用这两个库，则可能还需要针对jQueryUI / Bootstrap $.fn.button的解决方法。