Gibt es eine Möglichkeit, einem Bootstrap-Steuerelement über "Datenumschaltung" mehr als ein Ereignis zuzuweisen? Angenommen, ich möchte eine Schaltfläche, der ein "Tooltip" und ein "Button" -Umschalter zugewiesen sind.
Versuchte data-toggle = "Tooltip-Schaltfläche", aber nur der Tooltip funktionierte.
BEARBEITEN:
Dies ist leicht "umgehbar" mit
$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");
button
twitter-bootstrap
binding
LastTribunal
quelle
quelle
data-toggle="tooltip"
Element innerhalb des Hauptelements (Schaltflächenelements) wird außerhalb dieses Elements sauber angezeigt, während es sich mit diesem Element überlappt, wenn es in einem Span-Wrapper festgelegt wird.<span data-toggle="modal" data-target="#myModalForm" title="Click to edit row" data-row="0" data-cmid="425" data-id="11788" data-src="1.1.1.1" data-src_desc="null" data-dst="2.2.2.2" data-dst_desc="null" data-protocol="TCP" data-ports="80" data-remarks="none"><a class="btn btn-sm btn-info" data-toggle="tooltip" title="Click to edit row" data-original-title="Click to edit row" data-trigger="hover" href="javascript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></span>
Da der Tooltip nicht automatisch initialisiert wird, können Sie Änderungen an der Initialisierung des Tooltips vornehmen. Ich habe meine so gemacht:
mit diesem Markup:
Beachten Sie die
data-tooltip
.Aktualisieren
Oder einfach,
quelle
Ich habe es geschafft, dieses Problem zu lösen, ohne das Markup mit dem folgenden Teil von jQuery ändern zu müssen. Ich hatte ein ähnliches Problem, bei dem ich einen Tooltip für eine Schaltfläche haben wollte, die bereits das Umschalten von Daten für ein Modal verwendet. Hier müssen Sie lediglich den Titel zur Schaltfläche hinzufügen.
quelle
Dies ist die beste Lösung, die ich gerade implementiert habe:
HTML
JAVASCRIPT , das Sie ohnehin einschließen müssen, unabhängig davon, welche Methode Sie verwenden.
quelle
Noch nicht. Es wurde jedoch vorgeschlagen, dass jemand diese Funktion eines Tages hinzufügt.
Das folgende Bootstrap-Github-Problem zeigt ein perfektes Beispiel dafür, was Sie sich wünschen. Dies ist jedoch möglich, jedoch nicht ohne das Schreiben eines eigenen Workaround-Codes.
Hör zu... :-)
https://github.com/twitter/bootstrap/issues/7011
quelle
Ich benutze href, um das Modal zu laden und die Daten für den Tooltip umzuschalten:
quelle
Da Bootstrap Sie zwingt, Tooltips nur über Javascript zu initialisieren, habe ich dieses Javascript geändert
data-toggle="tooltip"
(da es dann unbrauchbar ist)class="bootstrap-tooltip"
und verwendet, um meine Tooltips zu initialisieren:Und so war ich frei, das
data-toggle
Attribut für etwas anderes zu verwenden (zBdata-toggle="button"
).quelle
Nur zur Ergänzung @Roman Holzner Antwort ...
In meinem Fall habe ich eine Schaltfläche, die den Tooltip anzeigt und die bis zu weiteren Aktionen deaktiviert bleiben sollte. Mit seinem Ansatz funktioniert das Modal auch dann, wenn die Schaltfläche deaktiviert ist, da der Aufruf außerhalb der Schaltfläche liegt - ich bin in einer Laravel-Blade-Datei, nur um klar zu sein :)
Wenn Sie das Modal also nur anzeigen möchten, wenn die Schaltfläche aktiv ist, sollten Sie die Reihenfolge der Tags ändern:
Wenn Sie es testen möchten, ändern Sie das Attribut mit einem JQuery-Code:
quelle
Noch eine Lösung:
quelle
Es gibt eine schöne Lösung mit Klasse
.stretched-link
. Button muss eine Klasse haben.position-relative
. Hier ist ein voll funktionsfähiges Beispiel:Der Schaltfläche muss ein Tooltip hinzugefügt werden, da sonst die Position falsch ist.
quelle
Wenn Sie Modal für ein Tag öffnen und Tooltip anzeigen möchten und Tooltip in Tag implementieren, wird Tooltip in der Nähe des Tags angezeigt. so was
Ich werde vorschlagen, div außerhalb eines Tags zu verwenden und "display: inline-block" zu verwenden.
quelle
quelle