Controle de bootstrap com vários "toggle"


153

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

Respostas:


330

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>

6
Essa é realmente a melhor abordagem, porque adia a preocupação da apresentação para a camada de apresentação.
LastTribunal

3
Porém, há alguma diferença: um elemento data-toggle="tooltip"interno (botão) principal será exibido fora desse elemento, enquanto que ele se sobrepõe a esse elemento, se definido dentro de um invólucro de extensão.
Benjamin

1
obrigado é assim que deve ser feito - Não javascript
tsadkan yitbarek 4/16

Solução curta, simples e inteligente. A adição da tag Span à Anchor não altera o design no bootstrap. Portanto, esta é a solução perfeita para executar o modelo e a dica de ferramenta juntos.
ankit Suthar

isso não funcionou para mim<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

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

10
Simplificado com: $ ('[data-tooltip = "tooltip"]'). Tooltip ();
21814 Ryan Currah

3
Usei sua resposta atualizada e foi muito fácil, funcionou perfeitamente
The One and Only ChemistryBlob

1
melhor do que embrulhar solução agradável
D3VELOPER 30/08/16

1
O problema com isso (e outras soluções nesta pergunta agora) é que, quando você clica para abrir o modal e fechá-lo, a dica de ferramenta aparece novamente (ou permanece visível), mesmo que o mouse tenha deixado o botão. Isso é muito irritante se, por exemplo, você tiver botões em uma tabela em cada linha, pois eles podem bloquear o botão acima / abaixo. A única maneira de ocultá-lo é clicar em algum lugar fora da dica de ferramenta.
abraçar

1
Eu amo essa abordagem muito mais do que a resposta aceita no wrapper. É muito simples, pois expande as capacidades do HTML5 sem sobrecarregar demais o DOM. Também no meu caso, a abordagem invólucro não parecem funcionar
Canelo Digital

11

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

9

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

1
Esta é a resposta mais limpa, menos intrusivos
Smyrnian

8

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


Infelizmente, esse problema (# 7011) foi recusado.
TJ Crowder

3

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>

3

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


Ótimo. Adicione HTML também.
Web_Developer

2

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

2

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>

2

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>


1

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

insira a descrição da imagem aqui

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>

insira a descrição da imagem aqui


0

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.