Clipboard.js used inside Bootstrap Popover does not copy content

Question

I am using a Bootstrap Popover with the contents in a div and a button to copy, when I click the button I cannot copy the contents of this div. I tested out the Popover the Clipboard.js and it worked.

my html is like this:

<div class="container">
<h3>Bootstrap Popover HTML, copiar conteú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>

my Js is like this:

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

My CSS is like this:

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

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

Functional example in Fiddle