Twitter Bootstrap 工具提示（）停止工作答案

【问题标题】：Twitter Bootstrap tooltip() stopped workingTwitter Bootstrap 工具提示（）停止工作
【发布时间】：2015-07-03 05:43:55
【问题描述】：

Bootstrap 工具提示出现问题，突然无法正常工作。它们是这样包含的：

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

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

//application.sass
@import "bootstrap"

在过去的一年中，它们被这样收录，没有任何问题。在开发工具中，我什至可以获得对 jQuery 元素的引用，并且开发工具的 auto complete 显示 tooltip() 可用。

但是，当我在元素上调用tooltip() 时，将鼠标悬停在该元素上时——什么都没有发生。

我对@987654328@ 执行相同的操作，它有效。

另一个奇怪的事情是当我使用 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>

我对@987654331@上的工具提示做了同样的事情：

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

底部工具提示

HTML 甚至不同。我的工具提示没有箭头。

我正在通过“bootstrap-sass”gem 使用 Rails、sass、Angular 和 bootstrap

【问题讨论】：

我认为您的项目中有某种与引导程序冲突的 jQueryUI 工具提示

标签： jquery angularjs twitter-bootstrap

【解决方案1】：

您的项目中似乎有 jQuery 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 的解决方法。

【讨论】：

原来如此。谢谢。