Copy to clipboard with javascript and Foundation input groups and tooltips

index.html.twig

{# 1: Setup --------------------------------- #}
{# https://clipboardjs.com/ #}

{# 2: Input group -------------------------- #}
<div class="input-group">
    <label for="vcsRepo" class="input-group-label">{{ entity.vcsSystem }}:</label>
    <input type="text" class="input-group-field" id="vcsRepo" name="vcsRepo" value="{{ entity.vcsRepo }}" />
    <div class="input-group-button">
        <button id="copyRepo"
                data-clipboard-target="#vcsRepo"
                data-tooltip
                aria-haspopup="true"
                class="has-tip top"
                data-disable-hover="true"
                data-click-open="false"
                tabindex="2" title="Copied!">
            <i class="fa fa-copy"></i>
        </button>
    </div>
</div>
                
                
{# 3: javascript -------------------------- #}
{% block footerscripts %}
{{ parent() }}
    <script type="text/javascript">
        $(function() {
            var copyBtn = $('#copyRepo');
            var clipboard = new Clipboard('#copyRepo');
            clipboard.on('success', function(e) {
                copyBtn.attr('title','Copied!').foundation('show');
                setTimeout(function(){
                    copyBtn.foundation('hide');
                }, 3000);
            });

            clipboard.on('error', function(e) {
                copyBtn.attr('title','Copy Failed').foundation('show');
            });
        });
    </script>
{% endblock %}