“Copy to clipboard” button development

A number of Code42’s support articles contain comprehensive API command or implementation script samples, but these samples were contained in <pre></pre> blocks that were difficult for users to easily copy. We needed a less error-prone way to deliver example content to users that they could then quickly incorporate into their own tasks, workflows, and implementations.

To solve the issue, I implemented a “Copy to clipboard” button in our HTML-based support content. The full solution was multi-pronged:

1. Use javascript to copy the example content. For simplicity, I used the open source Clipboard.js script and added it to the \media destination in our authoring tool.
2. Write some CSS to style the new button to match the product UI, as well as a new tooltip popup to indicate to users that the content has been copied successfully.
3. Create the HTML container to hold both the new button and the example content that we want users to be able to easily copy.
4. Develop a bit of javascript to pass what’s being copied to the Clipboard.js script and call the tooltip popup to appear when the button is clicked.
5. Document the whole process of adding the button to support article content in a team Confluence page so that the entire writing team can use it and add it where needed.

To see the button in action, go to the Sample uses of the Code42 API article on the Code42 support site and view any of the examples.

CSS styling

.copyBtn {
    border:none;
    outline:0;
    padding:0 5px;
    text-align:center;
    background-color:transparent;
    font-size:13px;color:#006FDE
}

.copyBtn:focus,.copyBtn:hover {
    background:rgba(30,52,142,.1);
    border-radius:6px;
    transition:all .25s ease-in
}

.copyBtn:active {
    border:2px solid #006FDE;
    border-radius:6px
}

.tooltip {
    position:absolute;
    right:0;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}

.tooltip .tooltiptext{
    visibility:hidden;
    width:80px;
    background-color:#555;
    color:#fff;
    font-size:10pt;
    text-align:center;
    border-radius:6px;
    padding:4px 0;
    position:absolute;
    z-index:1;
    bottom:125%;
    left:50%;
    margin-left:-40px
}

.tooltip .tooltiptext::after{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-5px;
    border-width:5px;
    border-style:solid;
    border-color:#555 transparent transparent
}

.tooltip .show{
    visibility:visible;
    -webkit-animation:fadeIn;
    animation:fadeIn .5s
}

.tooltip .hide{
    visibility:hidden;
    -webkit-animation:fadeOut;
    animation:fadeOut 1s
}

@-webkit-keyframes fadeIn{
    from{opacity:0}to{opacity:1}
}

@keyframes fadeIn{
    from{opacity:0}to{opacity:1}
}

@-webkit-keyframes fadeOut{
    from{opacity:1}to{opacity:0}
}

@keyframes fadeOut{
    from{opacity:1}to{opacity:0}
}

.c2c {
    padding-top:25px;
    padding-bottom:25px
}

HTML container

<div class="tooltip" onclick="tooltipMagic('PopupID')">
    <button class="copyBtn" data-clipboard-target="#Content2CopyID">
    <img height="18px" style="vertical-align:middle" width="18px" class="internal" alt="file_copy-24px.svg" loading="lazy" src="https://support.code42.com/@api/deki/files/31501/file_copy-24px.svg?revision=1&amp;size=bestfit&amp;width=18&amp;height=18" /> Copy to clipboard</button>

   <span class="tooltiptext" id="PopupID">Copied!</span></div>

   <pre class="c2c" id="Content2CopyID">Content to copy goes here</pre>

</div>

JavaScript

<script type="text/javascript">
// When the user clicks on div, open the popup

   function tooltipMagic(id) {
       var tooltip = document.getElementById(id);
       tooltip.classList.toggle("show");
       setTimeout(function(){tooltip.classList.toggle("show");},1000);
   }

   var copyBtn = new ClipboardJS(".copyBtn");
</script>