Controle de bootstrap com vários "toggle"

Existe uma maneira de atribuir mais de um evento a um controle de autoinicialização via "alternância de dados". Por exemplo, digamos que eu queira um botão que tenha uma "dica de ferramenta" e uma "alternância" de botão atribuídas a ele.
Tentei alternar entre dados = "botão da dica de ferramenta", mas apenas a dica funcionou.

EDITAR:

Isso é facilmente "contornável" com

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

Se você deseja adicionar um modal e uma dica de ferramenta sem adicionar javascript ou alterar a função de dica de ferramenta, você também pode simplesmente envolver um elemento ao seu redor:

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

Como a dica de ferramenta não é inicializada automaticamente, você pode fazer alterações na inicialização da dica. Eu fiz o meu assim:

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

com esta marcação:

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

Observe o data-tooltip.

Atualizar

Ou simplesmente,

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

Consegui resolver esse problema sem a necessidade de alterar nenhuma marcação com a seguinte parte do jQuery. Eu tive um problema semelhante em que queria uma dica de ferramenta em um botão que já usava a alternância de dados para um modal. Tudo o que você precisa fazer aqui é adicionar o título ao botão.

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

Esta é a melhor solução que acabei de implementar:

HTML

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

JAVASCRIPT que você precisa incluir de qualquer maneira, independentemente de qual método você usa.

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

Ainda não. No entanto, foi sugerido que alguém adicione esse recurso um dia.

O seguinte problema de inicialização do Github mostra um exemplo perfeito do que você deseja. É possível, mas não sem escrever seu próprio código de solução alternativa neste estágio.

Confira... :-)

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

Eu uso o href para carregar o modal e deixar a alternância de dados para a dica de ferramenta:

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

Como o Bootstrap obriga a inicializar dicas de ferramentas apenas por meio de Javascript, mudei data-toggle="tooltip"(já que é inútil) para class="bootstrap-tooltip"e usei esse Javascript para inicializar minhas dicas de ferramentas:

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

E então eu estava livre para usar o data-toggleatributo para outra coisa (por exemplo data-toggle="button").

Apenas para complementar a resposta de Roman Holzner ...

No meu caso, tenho um botão que mostra a dica de ferramenta e ela deve permanecer desativada até mais ações. Usando essa abordagem, o modal funciona mesmo que o botão esteja desativado, porque sua chamada está fora do botão - estou em um arquivo blade do Laravel, só para esclarecer :)

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

Portanto, se você quiser mostrar o modal apenas quando o botão estiver ativo, altere a ordem das tags:

<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 você quiser testá-lo, altere o atributo com um código JQuery:

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

Mais uma solução:

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

Existe uma boa solução usando classe .stretched-link. O botão deve ter uma classe.position-relative . Aqui está um exemplo completo de trabalho:

A dica de ferramenta deve ser adicionada ao botão, caso contrário, sua posição estará incorreta.

$('[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 você abre o modal em uma tag e deseja mostrar a dica de ferramenta e se implementar a tag dentro da dica, ela mostrará a tag nas proximidades. como isso

Vou sugerir que use div fora de uma tag e use "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>