ClipboardJS with Tooltip and Highlight Code

<center><h2>HTML Markup</h2></center>
    <pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;title&gt;Title&lt;/title&gt;

&lt;style&gt;body {width: 500px;}&lt;/style&gt;

&lt;script type=&quot;application/javascript&quot;&gt;
  function $init() {return true;}
&lt;/script&gt;

&lt;body&gt;
  &lt;p checked class=&quot;title&quot; id=&#39;title&#39;&gt;Title&lt;/p&gt;
  &lt;!-- here goes the rest of the page --&gt;
&lt;/body&gt;</code></pre>
<br />

<center><h2>Javascript Markup</h2></center>
    <pre><code class="javascript">function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
}

export  $initHighlight;</code></pre>

<link href='https://use.fontawesome.com/releases/v5.1.0/css/all.css' rel='stylesheet' type='text/css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/components/bootstrap@3/js/tooltip.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night-bright.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
        <style>.codeHeader{position:absolute;text-align:right;top:-5px;right:0}
  .copy-text{font-size:14px;cursor:pointer;color:#fff;padding:8px 10px;background:#000;border:1px solid #666;border-radius:100%}
  .copy-text:before{font-family:"font awesome 5 free";content:"\f24d";display:inline-block;font-size:13px}
  .copy-text:hover{color:#fff;background:#333}
  pre{padding-right:15px;position:relative}
  pre code{display:block;max-height:400px;font-size:14px;color:black;text-align:left;overflow:auto;border:0;margin:auto;padding:16px;line-height:21px}
  .tooltip{position:absolute;z-index:1030;display:block;font-size:12px;line-height:1.4;opacity:0;filter:alpha(opacity=0);visibility:visible}
  .tooltip.in{opacity:.9;filter:alpha(opacity=90)}
  .tooltip.top{padding:5px 0;margin-top:-3px}
  .tooltip.right{padding:0 5px;margin-left:3px}
  .tooltip.bottom{padding:5px 0;margin-top:3px}
  .tooltip.left{padding:0 5px;margin-left:-3px}
  .tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;border-radius:4px}
  .tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}
  .tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-color:#000;border-width:5px 5px 0}
  .tooltip.top-left .tooltip-arrow{bottom:0;left:5px;border-top-color:#000;border-width:5px 5px 0}
  .tooltip.top-right .tooltip-arrow{right:5px;bottom:0;border-top-color:#000;border-width:5px 5px 0}
  .tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-right-color:#000;border-width:5px 5px 5px 0}
  .tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-left-color:#000;border-width:5px 0 5px 5px}
  .tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-color:#000;border-width:0 5px 5px}
  .tooltip.bottom-left .tooltip-arrow{top:0;left:5px;border-bottom-color:#000;border-width:0 5px 5px}
  .tooltip.bottom-right .tooltip-arrow{top:0;right:5px;border-bottom-color:#000;border-width:0 5px 5px}</style>
        <script>$(function() {
    $("pre code").before("<div class='codeHeader'><a class='copy-text' data-clipboard-target='pre code' data-clipboard-action='copy'></a></div>");
 //   $('.copy-text').tooltip({
  //      trigger: 'click'
  //  })
    $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
    });
});
var clipboard = new ClipboardJS(".copy-text", {
    target: function(trigger) {
        return trigger.parentNode.nextElementSibling
    }
});

function setTooltip(btn, message) {
    $(btn).tooltip('hide').attr('data-original-title', message).tooltip('show');
}

function hideTooltip(btn) {
    setTimeout(function() {
        $(btn).tooltip('hide');
    }, 500);
}
clipboard.on('success', function(e) {
    e.clearSelection(); // if you want to clear the Selection
    var btn = $(e.trigger);
    setTooltip(btn, 'Copied');
    hideTooltip(btn);
});
clipboard.on('error', function(e) {
    var btn = $(e.trigger);
    setTooltip('Failed');
    hideTooltip(btn);
});</script>