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>

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.


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>

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/


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


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

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


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

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

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/


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.


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>


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.