Controllo Bootstrap con più "data-toggle"

C'è un modo per assegnare più di un evento a un controllo bootstrap tramite "data-toggle". Ad esempio, supponiamo che io voglia un pulsante con una "descrizione comandi" e un interruttore "pulsante" assegnato ad esso.
Tried data-toggle = "pulsante tooltip", ma ha funzionato solo il tooltip.

MODIFICARE:

Questo è facilmente "risolvibile" con

$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");

Se vuoi aggiungere una modale e una descrizione comandi senza aggiungere javascript o alterare la funzione della descrizione comandi, puoi anche semplicemente avvolgere un elemento attorno ad essa:

<span data-toggle="modal" data-target="modal">
    <a data-toggle="tooltip" data-placement="top" title="Tooltip">
      Hover Me           
    </a>
</span>

Poiché la descrizione comandi non viene inizializzata automaticamente, è possibile apportare modifiche all'inizializzazione della descrizione comandi. Ho fatto il mio in questo modo:

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

con questo markup:

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

Notare il data-tooltip .

Aggiornare

O semplicemente,

$('[data-tooltip="tooltip"]').tooltip();

Sono riuscito a risolvere questo problema senza la necessità di modificare alcun markup con il seguente pezzo di jQuery. Ho avuto un problema simile in cui volevo una descrizione comandi su un pulsante che stava già utilizzando l'interruttore dati per un modale. Tutto quello che devi fare qui è aggiungere il titolo al pulsante.

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

Questa è la migliore soluzione che ho appena implementato:

HTML

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

JAVASCRIPT che devi comunque includere indipendentemente dal metodo che usi.

$('[rel="tooltip"]').tooltip(); 

Non ancora. Tuttavia, un giorno è stato suggerito che qualcuno aggiungesse questa funzione.

Il seguente problema di bootstrap di Github mostra un perfetto esempio di ciò che desideri. È possibile, ma non senza scrivere il proprio codice di soluzione in questa fase però.

Controlla... :-)

https://github.com/twitter/bootstrap/issues/7011

Uso href per caricare il modale e lasciare data-toggle per il tooltip:

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

Poiché Bootstrap ti obbliga a inizializzare i suggerimenti solo tramite Javascript, ho cambiato data-toggle="tooltip"(dato che è inutile allora) class="bootstrap-tooltip"e ho usato questo Javascript per inizializzare i miei suggerimenti:

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

E così ero libero di usare l' data-toggleattributo per qualcos'altro (ad es data-toggle="button".).

Solo per complemento @Roman Holzner risposta ...

Nel mio caso, ho un pulsante che mostra la descrizione comandi e dovrebbe rimanere disabilitato fino a quando non ci saranno azioni. Usando il suo approccio, il modale funziona anche se il pulsante è disabilitato, perché la sua chiamata è al di fuori del pulsante - Sono in un file blade Laravel, solo per essere chiari :)

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

Quindi, se vuoi mostrare il modale solo quando il pulsante è attivo, dovresti cambiare l'ordine dei tag:

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

Se vuoi provarlo, cambia l'attributo con un codice JQuery:

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

Un'altra soluzione:

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

C'è una bella soluzione usando la classe .stretched-link. Il pulsante deve avere una classe.position-relative . Ecco un esempio di lavoro completo:

La descrizione comandi deve essere aggiunta al pulsante, altrimenti la sua posizione non sarà corretta.

$('[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>

Quando si apre modale su un tag e si desidera mostrare la descrizione comandi e se si implementa la descrizione comandi all'interno del tag, verrà mostrata la descrizione tag vicina. come questo

Suggerirò di usare div al di fuori di un tag e usare "display: inline-block;"

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