Bootstrap-Steuerung mit mehreren "Datenumschaltern"

153

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");
LastTribunal
quelle

Antworten:

330

Wenn Sie ein Modal und einen Tooltip hinzufügen möchten, ohne Javascript hinzuzufügen oder die Tooltip-Funktion zu ändern, können Sie auch einfach ein Element darum wickeln:

<span data-toggle="modal" data-target="modal">
    <a data-toggle="tooltip" data-placement="top" title="Tooltip">
      Hover Me           
    </a>
</span>
Roman Holzner
quelle
6
Dies ist eigentlich der beste Ansatz, da er das Anliegen der Präsentation auf die Präsentationsebene verschiebt.
LastTribunal
3
Es gibt jedoch einen Unterschied: Ein 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.
Benjamin
1
danke, so sollte es gemacht werden - kein Javascript
tsadkan yitbarek
Kurze, einfache und intelligente Lösung. Durch Hinzufügen von Span zum Anchor-Tag wird das Design im Bootstrap nicht geändert. Dies ist also die perfekte Lösung, um Modell und Tooltip zusammen auszuführen.
Ankit Suthar
das hat bei mir nicht funktioniert<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>
shorif2000
72

Da der Tooltip nicht automatisch initialisiert wird, können Sie Änderungen an der Initialisierung des Tooltips vornehmen. Ich habe meine so gemacht:

$(document).ready(function() {
    $('body').tooltip({
        selector: "[data-tooltip=tooltip]",
        container: "body"
    });
});

mit diesem Markup:

<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>

Beachten Sie die data-tooltip.

Aktualisieren

Oder einfach,

$('[data-tooltip="tooltip"]').tooltip();
Melvin
quelle
10
Vereinfacht dies mit: $ ('[data-tooltip = "tooltip"]'). Tooltip ();
Ryan Currah
3
Verwendete Ihre aktualisierte Antwort und war sehr einfach, funktionierte perfekt
The One and Only ChemistryBlob
1
am besten als schöne Lösung zu
verpacken
1
Das Problem bei diesem (und anderen Lösungen in dieser Frage) besteht darin, dass beim Klicken zum Öffnen und anschließenden Schließen des Modals der Tooltip erneut angezeigt wird (oder sichtbar bleibt), obwohl die Maus die Schaltfläche verlassen hat. Dies ist sehr ärgerlich, wenn Sie z. B. Schaltflächen in einer Tabelle in jeder Zeile haben, da diese die Schaltfläche oben / unten blockieren können. Sie können es nur ausblenden, indem Sie auf eine Stelle außerhalb des Tooltips klicken.
Umarmung
1
Ich liebe diesen Ansatz viel mehr als die akzeptierte Antwort mit dem Wrapper. Es ist sehr einfach, da es die HTML5-Kapazitäten erweitert, ohne das DOM zu stark zu überlasten. Auch in meinem Fall schien der Wrapper-Ansatz nicht zu funktionieren
Canelo Digital
11

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.

$('[data-toggle="modal"][title]').tooltip();
James Parker
quelle
9

Dies ist die beste Lösung, die ich gerade implementiert habe:

HTML

<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>

JAVASCRIPT , das Sie ohnehin einschließen müssen, unabhängig davon, welche Methode Sie verwenden.

$('[rel="tooltip"]').tooltip(); 
Jacques Koekemoer
quelle
1
Dies ist die sauberste, am wenigsten aufdringliche Antwort
Smyrnian
8

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

obrientimothya
quelle
Leider wurde dieses Problem (# 7011) abgelehnt.
TJ Crowder
3

Ich benutze href, um das Modal zu laden und die Daten für den Tooltip umzuschalten:

<a 
    data-toggle="tooltip"
    data-placement="top"
    title="My Tooltip text!"
    href="javascript:$('#id').modal('show');"
>
+
</a>
Shadi Namrouti
quelle
3

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:

$('.bootstrap-tooltip').tooltip();

Und so war ich frei, das data-toggleAttribut für etwas anderes zu verwenden (zB data-toggle="button").

Ankabot
quelle
Toll. Fügen Sie auch HTML hinzu.
Web_Developer
2

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

<span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}">
    <button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

Wenn Sie das Modal also nur anzeigen möchten, wenn die Schaltfläche aktiv ist, sollten Sie die Reihenfolge der Tags ändern:

<span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
    <button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

Wenn Sie es testen möchten, ändern Sie das Attribut mit einem JQuery-Code:

$('button[name=delete]').attr('disabled', false);
Thiago Cardoso
quelle
2

Noch eine Lösung:

    <a data-toggle="modal" data-target="#exampleModalCenter">
      <span
        class="tags"
        data-toggle="tooltip"
        data-placement="right"
        title="Tooltip text"
      >
        Text
     </span>
   </a>
Jackkobec
quelle
2

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.

$('[data-toggle="tooltip"]').tooltip();
/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!--BUTTON-->
<button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text">
    <span class="stretched-link" data-toggle="modal" data-target="#exampleModal"></span>
    Click Me!
</button>

<!--DEMO MODAL-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">Modal body</div></div></div></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

Jakub Muda
quelle
1

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

Geben Sie hier die Bildbeschreibung ein

Ich werde vorschlagen, div außerhalb eines Tags zu verwenden und "display: inline-block" zu verwenden.

<div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;">
    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)">
     <span class="fa fa-plus"></span>
    </a>
</div>

Geben Sie hier die Bildbeschreibung ein

virender
quelle
0

<a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>

Ananth
quelle