Bootstrap-Steuerung mit mehreren "Datenumschaltern"

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

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>

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();

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();

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(); 

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

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>

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").

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

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>

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>

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.

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

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