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?
jquery-ui
twitter-bootstrap
markdotnet
quelle
quelle
Antworten:
Sowohl jQuery UI als auch Bootstrap verwenden
tooltip
den 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, dienoConflict
Option im Bootstrap-Widget zu verwenden, führt nur zu vielen Fehlern, da sie nicht ordnungsgemäß funktioniert. Dieses Problem wurde hier gemeldet ):Also der Code, damit es funktioniert:
Netter Code zum Einfügen von Kopien, der auch den Schaltflächenkonflikt behandelt:
quelle
'undefined' is not an object (evaluating '$.widget.bridge')
bridge
Ding machen und dann Bootstrap importieren.Eine einfache Lösung besteht darin, bootrap.js nach jquery-ui.js zu laden, sodass die Bootstrap-Tooltip-Methode Vorrang hat.
quelle
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!
quelle
Für den Fall , müssen Sie laden
jquery-ui.js
nachbootstrap.js
hier ist , wie es geht:Dies überschreibt den Tooltip von jquery-ui und verwendet immer Bootstraps.
quelle
Angenommen, die Benutzeroberfläche wird nach der Initialisierung von Bootsrap aufgerufen
Speichern Sie die Bootstrap-Funktion unmittelbar vor der Initialisierung der Benutzeroberfläche
Nennen Sie es dann wie folgt
quelle
$.fn.bstooltip = $.fn.tooltip.noConflict();
Diese Lösung scheint für mich gut zu funktionieren.
quelle
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.
quelle
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).
quelle
Es gibt eine einfache und gute Lösung. Ordnen Sie einfach Ihren Bootstrap- und JQuery-UI-Dateilink wie folgt neu an:
Laden Sie einfach jQueryui, bevor Sie die Boostrap-JS-Datei laden. Es ist Arbeit für mich.
quelle
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:
quelle