-1

 $('#texto').popover({
        html: true,
        content: function () {
            return $('#teste').html();
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id ="texto" class="btn btn-lg btn-danger" data-toggle="popover-click" title="Título do popover" >Clique para ver o popover</button>

<div id="teste">
    <h1>meu conteudo ira aqui</h1>
</div>

Ao invés da div aparece só no popover, ela aparece tbm no corpo da página!

1
  • Uma solução simples é deixar a div oculta: <div id="teste" style="display: none;">.
    – Benilson
    21/11/2019 às 17:52

1 Resposta 1

2

Como comentado pelo @Benilson, você pode ocultar a div com display: none:

$('#texto').popover({
   html: true,
   content: function () {
      return $('#teste').html();
   }
});
#teste{
   display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<button type="button" id ="texto" class="btn btn-lg btn-danger" data-toggle="popover-click" title="Título do popover" >Clique para ver o popover</button>

<div id="teste">
    <h1>meu conteudo <strong>ira</strong> aqui</h1>
</div>  

Ou usar um template string para montar o HTML, sem ter que criar um nó no DOM:

$('#texto').popover({
   html: true,
   content: function () {

      var html = `<h1>
         meu conteudo <strong>ira</strong> aqui
      </h1>`;

      return html;
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<button type="button" id ="texto" class="btn btn-lg btn-danger" data-toggle="popover-click" title="Título do popover" >Clique para ver o popover</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .