Bootstrap Popover with HTML

by Diweine

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<div class="container">
  <h3>Bootstrap Popover HTML, copiar contúdo do Popover</h3>

    <a data-placement="bottom" data-toggle="popover" data-container="body" type="button" data-html="true" href="#"><span class="glyphicon glyphicon-search  popoverTriggerBtn" style="margin:3px 0 0 0"></span></a>
    <div id="popover-content" class="popoverHtml hide">
       <div id="copy-text">
         Texto copiado para a área de transferência
       </div>
       <button class="btn" data-clipboard-action="copy" data-clipboard-target="#copy-text">Copiar</button>
    </div>

</div>

CSS

.container { padding: 20px; }
.form-control { width: 120px; }
.popover { max-width: 400px; }

#copy-text {
  padding: 8px 8px 8px 0;
}

JavaScript

$("[data-toggle=popover]").popover({
    animation: true,
    html: true,
    placement: 'bottom',
    trigger: 'click',
    container: 'body',
    content: function() { return $(".popoverHtml").html(); }
});

function CopiaConteudo() {
  var clipboard = new Clipboard('.btn');
  alert(clipboard);
}

$(document).on("mousedown",".btn", function(e) {
	  CopiaConteudo();
});