以'data-toggle="tooltip" 由于 jquery-ui.min.js 而无法工作 - Javascript

问题描述

在使用data-toggle="tooltip"的前提下，无法使用jquery-ui.min.js，导致tooltip无法正常工作。

解决方案

1. 使用jQuery UI的tooltip插件

不建议同时使用data-toggle="tooltip"和jquery-ui.min.js，因为它们会产生冲突。建议改用jQuery UI自带的tooltip插件，可以像这样使用：

$(function() {
  $(document).tooltip();
});

2. 改用其他tooltip插件

如果不想使用jQuery UI自带的tooltip插件，可以考虑其他tooltip插件，比如Bootstrap的tooltip插件或者qTip2插件。

3. 使用noConflict()方法

如果非要同时使用data-toggle="tooltip"和jquery-ui.min.js，可以使用noConflict()方法解决冲突。

var jqui = jQuery.noConflict(true);

然后，在使用data-toggle="tooltip"时，可以这样写：

<a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a>

$jqui(function() {
  $jqui('[data-toggle="tooltip"]').tooltip();
});

总结

当要同时使用data-toggle="tooltip"和jquery-ui.min.js时，可以改用jQuery UI自带的tooltip插件、其他tooltip插件或者使用noConflict()方法解决冲突。