HTML dentro do popover do Twitter Bootstrap

288

Estou tentando exibir HTML dentro de um popover de inicialização, mas de alguma forma não está funcionando. Encontrei algumas respostas aqui, mas não vai funcionar para mim. Por favor, deixe-me saber se estou fazendo algo errado.

<script>
  $(function(){
    $('[rel=popover]').popover({ 
      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();
      }
    });
  });
</script>

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 
    popover
</li>

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>
</div>
Adrian Mojica
fonte

Respostas:

351

Você não pode usá- <li href="#"lo, pois <a href="#"é por isso que não estava funcionando. Altere-o e está tudo bem.

Aqui está o JSFiddle trabalhando, que mostra como criar popover de autoinicialização.

Partes relevantes do código estão abaixo:

HTML:

<!-- 
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

JavaScript:

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

E, a propósito, você sempre precisa pelo menos $("[data-toggle=popover]").popover();ativar a popover. Mas no lugar de data-toggle="popover"você também pode usar id="my-popover"ou class="my-popover". Lembre-se de habilitá-los usando, por exemplo: $("#my-popover").popover();nesses casos.

Aqui está o link para a especificação completa: Bootstrap Popover

Bônus:

Se, por algum motivo, você não gostar ou não puder ler o conteúdo de um pop-up nas tags data-togglee title. Você também pode usar, por exemplo, divs ocultos e um pouco mais de JavaScript. Aqui está um exemplo sobre isso.

Mauno Vähä
fonte
1
Remova HREF href = "#" nos elementos da tag ANCHOR para impedir a rolagem para o topo da página!
Peter_pilgrim
@peter_pilgrim Obrigado por dizer isso. Atualizei minha resposta para usar a versão mais recente do bootstrap e afastei href = "#" das tags <a> e as fiz se comportar como botões. (Isso também está documentado no site de inicialização). Adicionado esse link ao final da minha resposta.
Mauno Vähä
Encontrei um problema com dispositivos iOS. O popover funciona com tela sensível ao toque. Você encontrou uma solução geral? Na verdade, acho que isso também acontece com o código popover do Bootstrap. Alguma ideia?
Peter_pilgrim
285

você pode usar o atributo data-html="true":

<a href="#" id="example"  rel="popover" 
    data-content="<div>This <b>is</b> your div content</div>" 
    data-html="true" data-original-title="A Title">popover</a>
Dennis Münkle
fonte
Existe uma maneira de usá-lo no gwtbootstrap3, ele não funciona desta forma. Eu fiz a pergunta aqui stackoverflow.com/questions/34142815/… , mas nenhuma resposta até agora.
precisa saber é o seguinte
Não sei por que a resposta acima está marcada como correta. Talvez as pessoas escolham deliberadamente a opção mais complicada para preservar seus empregos.
Stephen
Eu tenho essa popover na parte inferior da minha página e funciona muito bem, exceto ... Isso me leva de volta ao topo da página. Eu o configurei em um loop foreach de miniaturas de inicialização. Alguma ideia?
foxtangocharlie
106

Outra maneira de especificar o conteúdo de popover de maneira reutilizável é criar um novo atributo de dados data-popover-contente usá-lo assim:

HTML:

<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
  <div class="popover-heading">
    This is the heading for #1
  </div>

  <div class="popover-body">
    This is the body for #1
  </div>
</div>

JS:

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

Isso pode ser útil quando você tem muito html para colocar em seus popovers.

Aqui está um exemplo de violino: http://jsfiddle.net/z824fn6b/

Jack
fonte
1
Essa abordagem modular é bastante elegante. Você pode ter muitos popovers e apenas uma função javascript genérica.
Xtian
1
Isso é ótimo, @Jack, obrigado. Eu amo não ter que colocar HTML em atributos. Tão bagunçado.
precisa
Impressionante trabalho aqui, adoro a simplicidade e usabilidade
FastTrack
Você é o verdadeiro MVP
plushyObject
Parece não estar funcionando com o bootstrap 3.4.1, você pode ajudar? @Jack stackoverflow.com/questions/60514533/…
user2513846
84

Você precisa criar uma instância de popover com a opção html ativada (coloque isso no seu arquivo javascript após o código JS do popover):

$('.popover-with-html').popover({ html : true });

Mike Lucid
fonte
22

Eu usei um pop dentro de uma lista, estou dando um exemplo via HTML

<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>
user3319310
fonte
1
abordagem mais simples, usando aspas diferentes para agrupar o código html. Pensamento agradável.
Jimmy Ilenloa
Bom, o truque real é alterar as aspas duplas para aspas simples!
Steven Barragán 03/03
8

Você só precisa colocar data-html="true"o popover do link. Vai dar certo

Tiago Piovesan
fonte
6

Esta é uma pequena modificação na excelente resposta de Jack .

A seguir, os popovers simples, sem conteúdo HTML, permanecem inalterados.

JavaScript:

$(function(){
    $('[data-toggle=popover]:not([data-popover-content])').popover();
    $('[data-toggle=popover][data-popover-content]').popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});
Marc A
fonte
4

Eu realmente odeio colocar HTML longo dentro do atributo, aqui está a minha solução, clara e simples (substitua? Pelo que você quiser):

<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
    <h2>Some title</h2>
    Some text
</a>

então

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
user1079877
fonte
4

Essa é uma pergunta antiga, mas é outra maneira, usando o jQuery para reutilizar o popover e continuar usando os atributos de dados de autoinicialização originais para torná-lo mais semântico:

A ligação

<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
   Show it!
</a>

Conteúdo personalizado para mostrar

<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Javascript

$('[rel="popover"]').popover({
    container: 'body',
    html: true,
    content: function () {
        var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
        return clone;
    }
});

Mexa com exemplo completo: http://jsfiddle.net/tomsarduy/262w45L5/

Tom Sarduy
fonte
2

Você pode alterar o 'template / popover / popover.html' no arquivo 'ui-bootstrap-tpls-0.11.0.js' Write: "bind-html-unsafe" em vez de "ng-bind"

Ele mostrará todo o popover com html. * seu html inseguro. Use somente se você confiar no html.

Guy Biber
fonte
0

Você pode usar o evento popover e controlar a largura pelo atributo 'data-width'

$('[data-toggle="popover-huongdan"]').popover({ html: true });
$('[data-toggle="popover-huongdan"]').on("shown.bs.popover", function () {
    var width = $(this).attr("data-width") == undefined ? 276 : parseInt($(this).attr("data-width"));
    $("div[id^=popover]").css("max-width", width);
});
 <a class="position-absolute" href="javascript:void(0);" data-toggle="popover-huongdan" data-trigger="hover" data-width="500" title="title-popover" data-content="html-content-code">
 <i class="far fa-question-circle"></i>
 </a>

Vĩnh Phú Ngô
fonte
-1

Adicione isso na parte inferior do seu arquivo popper.js:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform));

Fonte: https://github.com/twbs/bootstrap/issues/23590

Stef Van Looveren
fonte