jQueryUI-Tooltips konkurrieren mit Twitter Bootstrap

Ich konnte einige Tooltipps erhalten, um endlich mit dem folgenden Code zu arbeiten:

<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>

und dann

<script>
    $('[rel=tooltip]').tooltip();
</script>

Das Problem, auf das ich stoße, ist, dass jQueryUI-Tooltips (keine Pfeile, große hässliche Tooltips) anstelle von Bootstraps verwendet werden.

Was muss ich tun, um die Bootstrap-Tooltips anstelle von jQueryUI zu verwenden?

Sowohl jQuery UI als auch Bootstrap verwenden tooltipden Namen des Plugins. Verwenden Sie diese Option $.widget.bridge, um einen anderen Namen für die jQuery-UI-Version zu erstellen und dem Bootstrap-Plugin den Namen Tooltip zu geben (der Versuch, die noConflictOption im Bootstrap-Widget zu verwenden, führt nur zu vielen Fehlern, da sie nicht ordnungsgemäß funktioniert. Dieses Problem wurde hier gemeldet ):

// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

Also der Code, damit es funktioniert:

// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>

Netter Code zum Einfügen von Kopien, der auch den Schaltflächenkonflikt behandelt:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

Eine einfache Lösung besteht darin, bootrap.js nach jquery-ui.js zu laden, sodass die Bootstrap-Tooltip-Methode Vorrang hat.

Das hat bei mir funktioniert:

Wenn Sie JQuery-UI verwenden müssen, aber den Tooltip von Bootstrap verwenden möchten, können Sie einfach eine angepasste Version von JQuery-UI von dieser Website herunterladen .

Deaktivieren Sie einfach die Option "Tooltip" und laden Sie sie herunter (es wird so etwas wie "jquery-ui-1.10.4.custom.js" sein).

Fügen Sie es einfach Ihrem Projekt hinzu, anstatt der Version, die Sie gerade verwenden, und schon können Sie feiern. Dadurch wird der Konflikt vermieden. Es hat mir wie ein Zauber gewirkt!

Für den Fall , müssen Sie laden jquery-ui.jsnach bootstrap.jshier ist , wie es geht:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>jQuery.fn.tooltip = _tooltip;</script>

Dies überschreibt den Tooltip von jquery-ui und verwendet immer Bootstraps.

Angenommen, die Benutzeroberfläche wird nach der Initialisierung von Bootsrap aufgerufen

Speichern Sie die Bootstrap-Funktion unmittelbar vor der Initialisierung der Benutzeroberfläche

jQuery.fn.bstooltip = jQuery.fn.tooltip; 

Nennen Sie es dann wie folgt

$('.targetClass').bstooltip();

Diese Lösung scheint für mich gut zu funktionieren.

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

Wie wäre es stattdessen mit Bootstrap-Popovers? BS-Popover verursachen nicht denselben Konflikt, obwohl sie dieselbe tooltip.js-Komponente erfordern. Ja, sie sind stilisierter, aber meine JQuery-UI-Schaltflächen werden nicht wackelig.

Ich verwende die Jquery-Benutzeroberfläche nur für benutzerdefinierte Autocomplete- / Comboboxen (ich kann also nicht behaupten, dass andere JQ-UI-Steuerelemente in Ordnung sind), und keines der oben genannten Probleme hat das CSS-Problem behoben, bei dem die Combobox-Schaltflächen beim Aufrufen von BS-Tooltips "unstyled" wurden. Der Wechsel zu BS Popovers ergab im Wesentlichen den gleichen Effekt, ohne Konflikte, ohne Neuordnung meiner Skriptimporte und ohne explizite Bridge-Anweisungen.

versuchen Sie es mit jQuery.noConflict () und sehen Sie, ob Ihnen das überhaupt hilft. Es sieht so aus, als würden Bootstrap und jQuery denselben Namespace verwenden, und möglicherweise werden die Tooltips für Bootstrap und jQuery in dieselbe Funktion geladen, oder einer wird zuerst geladen.

Sie können auch überprüfen, welche Bibliothek zuerst geladen wird. Wenn Sie dieselbe Funktion zweimal in Javascript deklarieren, wird normalerweise die zweite verwendet.

Drittens überprüfen Sie das jQueryUI-Paket ( auf der Website) und prüfen Sie, ob Sie eine Version herunterladen können, in der die Tooltips nicht enthalten sind (ich habe dies überprüft und dies ist vollständig machbar).

Es gibt eine einfache und gute Lösung. Ordnen Sie einfach Ihren Bootstrap- und JQuery-UI-Dateilink wie folgt neu an:

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

Laden Sie einfach jQueryui, bevor Sie die Boostrap-JS-Datei laden. Es ist Arbeit für mich.

Eine einfache Möglichkeit besteht darin, bootstrap.js nach jquery-ui.js zu laden, sodass die Bootstrap-Tooltip die jquery-Benutzeroberflächen überschreibt. Wenn Sie einen Modullader wie requirejs verwenden, können Sie Bootstrap als solches von jquery-ui abhängig machen:

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...