How to remove div from the page to appear only in Popover

Asked

Viewed 47 times

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

Instead of the div only appears in the Popover, it appears tbm in the body of the page!

html twitter-bootstrap popover

  • A simple solution is to keep the div hidden: <div id="test" style="display: None;">.

1 answer

2

As commented by @Benilson, you can hide 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>

Or use a string template to mount HTML, without having to create a DOM node:

$('#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>

Browser other questions tagged html twitter-bootstrap popover

You are not signed in. Login or sign up in order to post.