Popovers e dicas de ferramentas do Bootstrap 3.0


84

Eu sou novo no Bootstrap e estou tendo problemas para fazer os recursos popover e dica de ferramenta funcionarem. Não tive problemas com os menus suspensos e modelos, mas parece que estou faltando algo para o popover e as dicas de ferramentas.

Estou recebendo dicas de ferramentas para aparecer, mas elas não são estilizadas e localizadas como os exemplos de bootstrap. E o popover não está funcionando.

Por favor, dê uma olhada e me diga o que estou perdendo.

       <!DOCTYPE html>
    <html>
      <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
        <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
        <link href="css/index.css" rel="stylesheet" media="screen">
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="../../assets/js/html5shiv.js"></script>
          <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
       <p id="tool"class="muted" style="margin-bottom: 0;">
        Tight pants next level keffiyeh
        <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
       <h3>Live demo</h3>
        <div style="padding-bottom: 24px;">
          <a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript">
            $(document).ready(function() {

                $('.tool').tooltip();
                $('.btn').popover();

            }); //END $(document).ready()

        </script>

        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>

      </body>

    </html>

Acabei de postar a mesma pergunta há alguns minutos, também usando BS3 com tudo o mais funcionando como Modais e Guias, mas sem dicas de ferramentas ou popovers ... atualizarei você caso encontre algo.
xXPhenom22Xx

para popover, as opções não estão definidas
Cybermaxs

Por enquanto, eu estava apenas tentando obter o comportamento padrão, mas estou interessado em fazê-lo aparecer ao passar o mouse em vez de clicar, mas isso foi o próximo. Eu ainda preciso colocar algo para opções?
user2560895

O código acima é o que estou usando atualmente e ainda não está funcionando. Alguma sugestão? Eu tenho algo na ordem errada ou algo assim?
user2560895

Respostas:


147

Acontece que Evan Larsen tem a melhor resposta . Vote na resposta dele (e / ou selecione-a como a resposta correta) - é brilhante.

Trabalhando jsFiddle aqui

Usando o truque de Evan, você pode instanciar todas as dicas de ferramentas com uma linha de código:

$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

Você verá que todas as dicas de ferramentas em seu longo parágrafo têm dicas úteis com apenas aquela linha.

No exemplo do jsFiddle (link acima), também adicionei uma situação em que uma dica de ferramenta (pelo botão Sign-In) está ativada por padrão. Além disso, o código da dica de ferramenta é ADICIONADO ao botão no jQuery, não na marcação HTML.


Popovers fazer funcionar o mesmo que as dicas:

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

E aí está! Sucesso finalmente.

Um dos maiores problemas em descobrir essas coisas foi fazer o bootstrap funcionar com jsFiddle ... Aqui está o que você deve fazer:

  1. Obtenha referência para o Twitter Bootstrap CDN aqui: http://www.bootstrapcdn.com/
  2. Cole cada link no bloco de notas e remova TODOS, exceto o URL. Por exemplo:
    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
  3. No jsFiddle, no lado esquerdo, abra a lista suspensa de recursos externos acordeão
  4. Cole em cada URL, pressionando o sinal de mais após cada colagem
  5. Agora, abra o menu suspenso "Frameworks & Extensions" e selecione jQuery 1.9.1 (ou qualquer ...)

Agora você está pronto para ir.


no jsFiddle, por que o gatilho não está entre aspas simples, mas o posicionamento está?
HPWD

Não há uma boa razão, eu simplesmente perdi. Mas parece funcionar. Talvez chaves de uma única palavra não precisem das aspas - às vezes não são necessárias - no entanto, eu geralmente as coloco.
cssyphus

isso parece lógico para mim. Obrigado por esclarecer.
HPWD

4
isso soa como um jargão para mim. Ha! só tinha que dizer;)
Evan Larsen

Você pode usar esse método na relatividade para um contêiner específico? Instanciar todas as dicas de ferramentas ou popovers em um contêiner específico?
Michael Ecklund

231

Eu uso isso em todas as minhas páginas para habilitar a dica de ferramenta

$(function () { $("[data-toggle='tooltip']").tooltip(); });

4
obrigado, de todas as respostas que dei, devo dizer que provavelmente gastei menos tempo neste. Mas ainda assim, ele concedeu a maioria dos pontos.
Evan Larsen

Mas o problema é. não está funcionando com o Chrome para mim. então acabei fazendo algo jsfiddle.net/arunpjohny/4HptX/4 deste post stackoverflow.com/questions/18372632/…
Md. Salahuddin

@Md Salahuddin, então está funcionando agora, uma vez que você atualizou seu jquery? Você está fazendo uma pergunta ou foi uma declaração?
Evan Larsen,

1
É apenas uma declaração. Em vez disso, usei jsfiddle.net/arunpjohny/4HptX/4, pois esse código não estava funcionando com o Chrome para o meu caso.
Md. Salahuddin

27

Trabalhando com BOOTSTRAP 3: Curto e Simples

Verificar - JS Fiddle

HTML

<div id="myDiv">
<button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>    
</div>

Javascript

$(function () { 
    $("[data-toggle='tooltip']").tooltip(); 
});

Isso não funcionará se você quiser ter a funcionalidade pop-over para dados que estão sendo carregados de forma assíncrona (ajax, angular etc), mas a resposta abaixo sim.
Adrian Hedley

6

Tive que fazer no DOM pronto

$( document ).ready(function () { // this has to be done after the document has been rendered
    $("[data-toggle='tooltip']").tooltip({html: true}); // enable bootstrap 3 tooltips
    $('[data-toggle="popover"]').popover({
        trigger: 'hover',
        'placement': 'top',
        'show': true
    });
});

E mude minhas ordens de carregamento para:

  • jQuery
  • jQuery UI
  • Bootstrap

1
Eu tive um problema semelhante, estava carregando jquery ui após o bootstrap, sua resposta me fez perceber o problema com isso.
hubson bropa

verifique isso para popover, 1. Triggering the Popovers, 2. Posicionamento de Popovers por meio de atributos de dados
Shaiju T

5

Por algum motivo, a única maneira de fazer meu código funcionar é alternando algumas coisas. Se nada funcionou para você até agora, dê uma olhada nisso:

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'
});

1
Esta é a única coisa que funcionou para mim, já que o elemento popover pode não estar à vista para começar. Obrigado!
J. Titus de

0

Você tem um erro de sintaxe em seu script e, conforme observado por xXPhenom22Xx, você deve instanciar a dica de ferramenta.

<script type="text/javascript">

    $(document).ready(function() {

        $('.btn-danger').tooltip();

    }); //END $(document).ready()

</script>

Observe que usei sua classe "btn-perigo". Você pode criar uma classe diferente ou usar um id="someidthatimakeup".


Ok, mudei o código para corresponder ao que você sugeriu, eu acho. Ainda não está funcionando. Não conheço Javascript ainda, então isso é um pouco complicado. Estou apenas tentando obter os exemplos para que funcionem da mesma maneira.
user2560895

O popover é um pouco difícil, mas fiz o tooltip funcionar como acima.
cssyphus

0

Você só precisa ativar a dica de ferramenta:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})

Não, isso apenas exibirá o popover em si quando você passar o mouse sobre ele, não a dica de ferramenta.
CpnCrunch

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.