Ich muss einen Tooltip auf einer deaktivierten Schaltfläche anzeigen und auf einer aktivierten Schaltfläche entfernen. Derzeit funktioniert es umgekehrt.
Was ist der beste Weg, um dieses Verhalten umzukehren?
$('[rel=tooltip]').tooltip();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<hr>
<button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>
Hier ist eine Demo
PS: Ich möchte das disabled
Attribut behalten .
javascript
jquery
html
twitter-bootstrap
twitter-bootstrap-tooltip
Lorraine Bernard
quelle
quelle
Antworten:
Hier ist ein Arbeitscode : http://jsfiddle.net/mihaifm/W7XNU/200/
Die Idee ist, den Tooltip mit der
selector
Option zu einem übergeordneten Element hinzuzufügen und dann dasrel
Attribut hinzuzufügen / zu entfernen , wenn die Schaltfläche aktiviert / deaktiviert wird.quelle
Sie können die deaktivierte Schaltfläche umbrechen und den Tooltip auf den Wrapper legen:
Wenn der Wrapper vorhanden ist,
display:inline
scheint der Tooltip nicht zu funktionieren. Verwendendisplay:block
unddisplay:inline-block
scheinen gut zu funktionieren. Es scheint auch gut mit einem schwebenden Wrapper zu funktionieren.UPDATE Hier ist eine aktualisierte JSFiddle, die mit dem neuesten Bootstrap (3.3.6) funktioniert. Vielen Dank an @JohnLehmann für den Vorschlag
pointer-events: none;
für den deaktivierten Button.http://jsfiddle.net/cSSUA/209/
quelle
btn-group
s?Dies kann über CSS erfolgen. Die Eigenschaft "Zeigerereignisse" verhindert, dass der Tooltip angezeigt wird. Sie können deaktivierte Schaltflächen zum Anzeigen von QuickInfos erhalten, indem Sie die von Bootstrap festgelegte Eigenschaft "Zeigerereignisse" überschreiben.
quelle
[disabled]
Schaltflächen nicht zu funktionieren . Bootstrap (2.3.2) weist außerdem keine Zeigerereignisse irgendwo in der Quelle zu.Wenn Sie verzweifelt (wie ich) nach QuickInfos zu Kontrollkästchen, Textfeldern und dergleichen suchen, finden Sie hier meine Problemumgehung:
Arbeitsbeispiele: http://jsfiddle.net/WB6bM/11/
Für das, was es wert ist, glaube ich, dass Tooltips zu deaktivierten Formularelementen für die UX sehr wichtig sind. Wenn Sie jemanden daran hindern, etwas zu tun, sollten Sie ihm sagen, warum.
quelle
Diese Problemumgehungen sind hässlich. Ich habe das Problem behoben, dass Bootstrap automatisch Zeigerereignisse für CSS-Eigenschaften festlegt: keine für deaktivierte Elemente.
Diese magische Eigenschaft führt dazu, dass JS kein Ereignis für Elemente verarbeiten kann, die mit dem CSS-Selektor übereinstimmen.
Wenn Sie diese Eigenschaft auf die Standardeinstellung überschreiben, funktioniert alles wie ein Zauber, einschließlich QuickInfos!
Sie sollten jedoch keinen so allgemeinen Selektor verwenden, da Sie wahrscheinlich die JavaScript-Ereignisausbreitung manuell stoppen müssen, wie Sie es kennen ( e.preventDefault () ).
quelle
In meinem Fall hat keine der oben genannten Lösungen funktioniert. Ich fand, dass es einfacher ist, die deaktivierte Schaltfläche mit einem absoluten Element zu überlappen:
Demo
quelle
Sie können den Tooltip nicht auf einer deaktivierten Schaltfläche anzeigen lassen. Dies liegt daran, dass deaktivierte Elemente keine Ereignisse auslösen, einschließlich des Tooltips. Am besten fälschen Sie die deaktivierte Schaltfläche (damit sie wie deaktiviert aussieht und sich so verhält), damit Sie den Tooltip auslösen können.
Z.B. Javascript:
Anstatt nur
$('[rel=tooltip]').tooltip();
HTML:
JSFiddle: http://jsfiddle.net/BA4zM/75/
quelle
Versuchen Sie dieses Beispiel:
Tooltips müssen initialisiert werden mit
jQuery
: Wählen Sie das angegebene Element aus und rufen Sie dietooltip()
Methode auf inJavaScript
:Hinzufügen
CSS
:Und dein HTML:
quelle
Sie können den "Zeigerereignis" -Stil von Bootstrap für deaktivierte Schaltflächen einfach über CSS überschreiben, z
Besser noch explizit sein und bestimmte Schaltflächen deaktivieren, z
quelle
Das haben ich und Tekromancr erfunden.
Beispielelement:
Hinweis: Die Tooltip-Attribute können einem separaten Div hinzugefügt werden, in dem die ID dieses Div beim Aufrufen von .tooltip ('destroy') verwendet werden soll. oder .tooltip ();
Dadurch wird der Tooltip aktiviert und in ein beliebiges Javascript eingefügt, das in der HTML-Datei enthalten ist. Diese Zeile muss jedoch möglicherweise nicht hinzugefügt werden. (Wenn der Tooltip ohne diese Zeile angezeigt wird, müssen Sie ihn nicht einfügen.)
zerstört den Tooltip, siehe unten für die Verwendung.
verhindert, dass die Schaltfläche angeklickt werden kann. Da das Attribut disabled nicht verwendet wird, ist dies erforderlich. Andernfalls kann die Schaltfläche weiterhin angeklickt werden, obwohl sie so aussieht, als wäre sie deaktiviert.
Mit Bootstrap stehen Ihnen die Klassen btn und btn-disabled zur Verfügung. Überschreiben Sie diese in Ihrer eigenen CSS-Datei. Sie können beliebige Farben hinzufügen oder wie auch immer die Schaltfläche aussehen soll, wenn sie deaktiviert ist. Stellen Sie sicher, dass Sie den Cursor beibehalten: default; Sie können auch ändern, wie .btn.btn-success aussieht.
Fügen Sie den folgenden Code zu dem Javascript hinzu, das die Aktivierung der Schaltfläche steuert.
Der Tooltip sollte jetzt nur angezeigt werden, wenn die Schaltfläche deaktiviert ist.
Wenn Sie AngularJS verwenden, habe ich auch eine Lösung dafür, falls gewünscht.
quelle
destroy
des Tooltips bin ich auf ein Problem gestoßen. (Siehe dies ) Aber$("#element_id").tooltip('disable')
und$("#element_id").tooltip('enable')
arbeite für mich.Wenn es jemandem hilft, konnte ich eine deaktivierte Schaltfläche zum Anzeigen eines Tooltips erhalten, indem ich einfach eine Spanne hineinlegte und das Tooltip-Material dort anbrachte, eckig um ihn herum ...
quelle
Basierend auf Bootstrap 4
Alle Details hier: Bootstrap 4 doc
quelle
Arbeitscode für Bootstrap 3.3.6
Javascript:
CSS:
quelle
Sie können den Effekt mit CSS3 imitieren.
Nehmen Sie einfach den deaktivierten Status von der Schaltfläche und der Tooltip wird nicht mehr angezeigt. Dies ist ideal für die Validierung, da der Code weniger Logik erfordert.
Ich habe diesen Stift geschrieben, um ihn zu veranschaulichen.
CSS3 Disabled Tooltips
quelle
Fügen Sie einfach die deaktivierte Klasse anstelle des Attributs disabled zur Schaltfläche hinzu, um sie stattdessen sichtbar zu deaktivieren.
Hinweis: Diese Schaltfläche scheint nur deaktiviert zu sein, löst jedoch weiterhin Ereignisse aus, und Sie müssen dies nur berücksichtigen.
quelle
pointer-events: auto;
funktioniert nicht auf einem<input type="text" />
.Ich habe einen anderen Ansatz gewählt. Ich deaktiviere das Eingabefeld nicht, sondern lasse es über CSS und Javascript deaktiviert wirken.
Da das Eingabefeld nicht deaktiviert ist, wird der Tooltip ordnungsgemäß angezeigt. In meinem Fall war es einfacher als das Hinzufügen eines Wrappers, falls das Eingabefeld deaktiviert war.
quelle
Für Bootstrap 3
HTML
CSS
JS
quelle
Ich habe dieses Problem endlich gelöst, zumindest mit Safari, indem ich "pointer-events: auto" vor "disabled" gesetzt habe. Die umgekehrte Reihenfolge hat nicht funktioniert.
quelle