jQueryUI-Tooltips konkurrieren mit Twitter Bootstrap

141

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?

markdotnet
quelle
Müssen Sie beide Dinge haben?
Matt
Nein ... Ich hätte nur gerne die Bootstrap-Tooltips.
Markdotnet
Entschuldigung, ich meinte, brauchen Sie JQuery UI und Bootstrap?
Matt
1
Dies funktionierte für mich, checkout diese Antwort
Poncho
1
@markdotnet: falsch. Bootstrap erfordert die JQuery- Kernbibliothek , nicht JQuery.UI.
Ian Kemp

Antworten:

191

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>
Der Demz
quelle
1
Ich erhalte einen js-Fehler, wenn ich dies versuche. 'undefined' is not an object (evaluating '$.widget.bridge')
Covard
2
covar - haben Sie sichergestellt, dass alle src-Skripte importiert wurden? Und verwenden Sie die neueren Versionen der Bibliotheken?
Der Demz
1
@covard: Es ist wichtig, dass Sie zuerst jquery-ui importieren, dann das bridgeDing machen und dann Bootstrap importieren.
Joshua Muheim
2
Eine Lösung, die schmerzhaft ist, wenn Sie alles gebündelt und minimiert haben. Es gibt keine Möglichkeit, dieses Skript irgendwie dazwischen zu legen. Verdammt, Name Kollisionsmüll.
Piotr Kula
2
Wenn Sie Webpack-Bundles mit minimiertem Code verwenden, können Sie einfach jquery-ui vor bootstrap.js
Raj
69

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

Stefan Musarra
quelle
2
Das hat bei mir funktioniert und ist der einfachste Weg. Ich empfehle, einen HTML-Kommentar hinzuzufügen, der besagt, dass eine Bibliothek nach der anderen geladen werden muss.
Paul
1
Eines Tages wird Ihnen bei Verwendung eines solchen Ansatzes das Schließen-Symbol in Dialogen fehlen. stackoverflow.com/questions/17367736/…
Oleksii Kyslytsyn
Diese Lösung hat bei mir nicht funktioniert. Mit Chrome würde ich den Cache "leeren und die Seite hart aktualisieren" und der Tooltip würde manchmal funktionieren und dann manchmal nicht (kein Fehler in console.log). 30-maliges Aktualisieren führte 7-mal zu Arbeitsergebnissen. Ich habe dann ein angepasstes jQuery-UI-Paket heruntergeladen und jetzt, wenn ich 30 Mal "Cache leeren und hart aktualisieren", erhalte ich 30 Mal Arbeitsergebnisse mit 0 Fehlern. Ich würde auch hinzufügen, dass ich require.js verwende, damit ich leicht die Reihenfolge steuern kann, in der Bibliotheken geladen werden.
HPWD
Ich liebe dich für diese einfachste logische Lösung
Milind
30

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!

Poncho
quelle
1
Sie laden also immer noch Asset-Dateien von jeder Seite pro Hand herunter, anstatt ein Tool wie bower zu verwenden? Wie installieren Sie Bibliotheken von Drittanbietern im Allgemeinen? Suchen Sie in Google nach und laden Sie es von einer beliebigen Website herunter?
user3746259
Wie wäre es, wenn ich nicht den Bootstrap-Tooltip verwenden möchte, sondern den UI-Tooltip. Sie sind diejenigen, die das Problem in irgendeiner Weise verursachen.
Piotr Kula
2
Einfach, leicht, hat gut für meine Situation funktioniert. Danke dir! +1
Chris Kempen
Arbeitete für mich - habe wirklich meinen Kopf darüber geschlagen - plus eins - danke
gchq
Die vernünftigste Antwort, solange nur die erforderliche Funktionalität benötigt wird. Vielen Dank
Oleksii Kyslytsyn
30

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.

Supersan
quelle
1
In Ihrer Lösung wird der UI-Tooltip mit Bootstrap überschrieben. Wenn jedoch ein Körper nicht überschreiben möchte, muss die vorherige Lösung verwendet werden
Projesh Pal
Eines Tages wird Ihnen bei Verwendung eines solchen Ansatzes das Schließen-Symbol in Dialogen fehlen. stackoverflow.com/questions/17367736/…
Oleksii Kyslytsyn
tolle Lösung!
Ivan Ferrer
18

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();
Projesh Pal
quelle
Offizieller Weg $.fn.bstooltip = $.fn.tooltip.noConflict();
Igor Jerosimić
9

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);
Jon Stevens
quelle
9

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.

AgonyOfVictory
quelle
3
So sehr pragmatisch
Mark Stratmann
Vielen Dank für den Tipp, ich stimme zu, es ist eine Problemumgehung, die jede Komplexität vermeidet.
Tom
Ja Mann, dis man löst alle Alpträume und sieht shweet aus wie eine Zitrone!
Piotr Kula
Benötigen Popover nicht einen Tooltip als Voraussetzung?
MrKobayashi
3

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).

Matt
quelle
Das ist also seltsam ... Ich lade die Javascript-Bibliotheken in derselben Reihenfolge, aber als ich das Problem hatte, lud ich die jquery-ui-Bibliothek vor meinem <body> -Tag und die bootstrap.js nach all meinem Inhalt. Ich habe die Datei bootstrap.js über meinen Inhalt verschoben (aber immer noch nach jquery-ui.js) und jetzt werden die Tooltips wie erwartet gerendert. Ich hoffe, dass dies das Universum meiner Website nicht durcheinander bringt. Ich dachte, es wäre eine bewährte Methode, aus Leistungsgründen das Javascript zu laden, das Sie nach dem Inhalt verwenden können ... seltsam.
Markdotnet
Es ist eine bewährte Methode. Vielleicht muss der Bootstrap oben sein?
Matt
Bootstrap JS muss definitiv nicht oben auf der Seite sein.
Paul Phillips
3

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.

Sanjib Debnath
quelle
1
Eines Tages wird Ihnen bei Verwendung eines solchen Ansatzes das Schließen-Symbol in Dialogen fehlen. stackoverflow.com/questions/17367736/…
Oleksii Kyslytsyn
Es überschreibt alle gängigen Eigenschaften von UI mit Bootstrap Min und kann bei Bedarf nicht beide verwenden
Projesh Pal
1

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' ]
        },...
Andrew
quelle