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>
javascript
jquery
css
twitter-bootstrap
user2560895
fonte
fonte
Respostas:
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:
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
Agora você está pronto para ir.
fonte
Eu uso isso em todas as minhas páginas para habilitar a dica de ferramenta
$(function () { $("[data-toggle='tooltip']").tooltip(); });fonte
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(); });fonte
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:
fonte
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' });fonte
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".fonte
Você só precisa ativar a dica de ferramenta:
$('some id or class that you add to the above a tag').popover({ trigger: "hover" })fonte
Se você estiver usando Rails e ActiveAdmin, este será o seu problema: https://github.com/seyhunak/twitter-bootstrap-rails/issues/450 Basicamente, um conflito com active_admin.js
Esta é a solução: https://stackoverflow.com/a/11745446/264084 (resposta de Karen) tldr: Mova ativos active_admin para o diretório "vendor".
fonte