Aktivieren bootstrap tooltip-Taste deaktiviert?
Brauche ich, um eine QuickInfo anzuzeigen, die auf Behinderten-Taste und entfernen Sie Sie auf Schaltfläche aktiviert.
Tatsächlich, es funktioniert in umgekehrter Weise.
Was ist der beste Weg, um umkehren dieses Verhalten?
JS:
$('[rel=tooltip]').tooltip();
HTML:
<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 die demo: http://jsfiddle.net/BA4zM/68/
P. S.: ich will das Attribut deaktiviert.
- die Schaltfläche, die deaktiviert werden müssen ist deaktiviert...
- Ich will, dass die Schaltfläche deaktiviert, aber zur gleichen Zeit die Anzeige eines QuickInfo-Ereignis klicken.
- Dies wird nicht helfen die OP, sondern auch für zukünftige Besucher kann schätzen, wissen, dass der "readonly" - Attribut ist ähnlich (wenn nicht identisch) und nicht block Benutzer-events wie mouseover.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier einige arbeiten code: http://jsfiddle.net/mihaifm/W7XNU/200/
Die Idee ist, fügen Sie die QuickInfo, um ein übergeordnetes element mit der
selector
option, und klicken Sie dann hinzufügen/entfernen, dierel
- Attribut, wenn aktivieren/deaktivieren Sie die-Taste.Können Sie wickeln Sie die deaktivierte Taste und setzen Sie den tooltip auf der Hülle:
Wenn der wrapper hat
display:inline
dann der tooltip scheint nicht zu funktionieren. Mitdisplay:block
unddisplay:inline-block
scheinen gut zu funktionieren. Es scheint auch zu funktionieren, mit einem Schwamm wrapper.UPDATE Hier ist eine aktualisierte JSFiddle, das funktioniert mit der neuesten Bootstrap (3.3.6). Dank @JohnLehmann für die Annahme
pointer-events: none;
für Behinderte-Taste.http://jsfiddle.net/cSSUA/209/
btn-group
s?pointer-events: none;
hat den trick! ?Dieses erfolgt über CSS. Die "pointer-events" - Eigenschaft ist, was die Verhinderung der QuickInfo angezeigt wird. Erhalten Sie deaktivierte buttons zum anzeigen von QuickInfo durch überschreiben der "pointer-events" - Eigenschaft ist festgelegt durch bootstrap.
[disabled]
Tasten. Sehe auch nicht ein, Bootstrap (2.3.2) die Zuweisung pointer-events überall in der Quelle.[disabled]
- Tasten verwenden Sie diese:.btn[disabled]{ pointer-events: auto; }
[disabled]
Tasten der Ansatz.btn[disabled]{ pointer-events: auto; }
funktioniert nicht bei IE11. Es ist einfacher zu bedienen.disabled
css-Klasse..btn.disabled { pointer-events: auto !important; }
Wenn Sie verzweifelt sind (wie ich war) für tooltips auf Checkboxen, Textfelder und dergleichen, dann ist hier meine hackey Problemumgehung:
Arbeiten Beispiele: http://jsfiddle.net/WB6bM/11/
Für das, was Ihren Wert, ich glaube tooltips auf disabled form-Elemente ist sehr wichtig für die UX. Wenn Sie verhindern, jemanden von etwas zu tun, sollten Sie Ihnen sagen, warum.
Diese Problemumgehungen sind hässlich. Ich habe ausgetestet, das problem ist, dass bootstrap automatisch eingestellt CSS-Eigenschaft pointer-events: none auf deaktivierte Elemente.
Diese Magische Eigenschaft bewirkt, dass JS nicht in der Lage zu handhaben jedem Fall auf Elemente, entspricht dem CSS-Selektor.
Wenn Sie überschreiben diese Eigenschaft auf den Standardwert ein, alles funktioniert wie ein Charme, einschließlich tooltips!
Sollten Sie jedoch nicht verwenden, so Allgemeinen Selektor, da werden Sie wahrscheinlich haben, um manuell zu stoppen JavaScript-event-Ausbreitung, wie Sie wissen, (e.preventDefault()).
Können Sie nicht den tool-Tipp, um zu zeigen, auf einem deaktivierten button. Dies ist, weil Behinderte-Elemente nicht auslösen, Ereignisse, einschließlich der tool-Tipp. Ihre beste Wette wäre, zu fälschen die Schaltfläche deaktiviert (so sieht es aus und verhält sich wie Ihre Behinderten), so kann man dann auslösen, der tool-Tipp.
ZB. Javascript:
Statt nur
$('[rel=tooltip]').tooltip();
HTML:
JSFiddle: http://jsfiddle.net/BA4zM/75/
In meinem Fall, keine der oben genannten Lösungen gearbeitet. Ich fand, dass es einfacher ist, überlappen sich die deaktivierte Taste mit einem absoluten element:
Demo
Können Sie einfach überschreiben Bootstrap die "pointer-events" - Stil für deaktivierte buttons via CSS z.B.
Besser noch explizite und deaktivieren Sie bestimmte Tasten wie z.B.
Versuchen Sie dieses Beispiel:
Tooltips muss initialisiert werden, mit
jQuery
: wählen Sie das angegebene element und rufen Sie dentooltip()
Methode inJavaScript
:Hinzufügen
CSS
:Und Ihre html:
Dies ist, was mich und tekromancr kam mit.
Beispiel element:
Hinweis: der tooltip Attribute können Hinzugefügt werden, um ein separates div, in dem die id des div wird beim Aufruf .tooltip('destroy'); oder .tooltip();
dies ermöglicht den tooltip, legen Sie es in der javascript enthalten ist in der html-Datei. diese Zeile könnte notwendig sein, jedoch hinzufügen. (wenn der tooltip zeigt w/o diese Zeile dann nicht die Mühe, einschließlich der it -)
zerstört tooltip angezeigt, siehe unten für die Nutzung.
verhindert, dass die Schaltfläche anklickbar. weil das disabled-Attribut wird nicht verwendet, dies ist notwendig, da sonst die button immer noch anklickbar, auch wenn es "aussieht" als wenn es deaktiviert ist.
Verwendung von bootstrap, die Klassen btn und btn-disabled stehen Ihnen zur Verfügung.
Überschreiben Sie diese in Ihrem eigenen .css-Datei. Sie können fügen Sie alle Farben oder was auch immer Sie möchten, dass der button Aussehen, wenn deaktiviert. Achten Sie darauf, halten Sie den cursor: default; du kannst auch was ändern .btn.btn-success aussieht.
fügen Sie den folgenden code, um was auch immer javascript ist die Kontrolle der Taste immer aktiviert.
tooltip sollte jetzt nur zeigen, wenn die Schaltfläche deaktiviert ist.
wenn Sie mit angularjs ich habe auch eine Lösung dafür, falls gewünscht.
destroy
auf tooltip. (Siehe dieser) Allerdings$("#element_id").tooltip('disable')
und$("#element_id").tooltip('enable')
für mich arbeiten.Funktionierenden code für die Bootstrap-3.3.6
Javascript:
CSS:
Können Sie imitieren den Effekt mit CSS3.
Nehmen Sie einfach die deaktivierten Zustand aus dem button und der tooltip erscheint nicht mehr.. dies ist ideal für die Validierung der code erfordert weniger Logik.
Schrieb ich diesen Stift zu illustrieren.
CSS3 Tooltips Deaktiviert
pointer-events: auto;
funktioniert nicht auf einem<input type="text" />
.Ich nahm einen anderen Ansatz. Ich nicht, deaktivieren Sie das Eingabefeld, aber machen Sie als Behinderte über css und javascript.
Weil das input-Feld nicht deaktiviert ist, wird der tooltip richtig angezeigt wird. Es war in meinem Fall viel einfacher als das hinzufügen einer wrapper im Falle der input-Feld wurde deaktiviert.
JS:
CSS:
HTML:
Für Bootstrap 3
HTML
CSS
JS
JS:
CSS:
HTML: