Use clippy instead of popper

templates/base.html

@@ -9,8 +9,8 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
         <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js" integrity="sha512-BmM0/BQlqh02wuK5Gz9yrbe7VyIVwOzD1o40yi1IsTjriX/NGF37NyXHfmFzIlMmoSIBXgqDiG1VNU6kB5dBbA==" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
 
 
         <style type="text/css">

templates/games/game_detail.html

@@ -1,43 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
 
-{% block head_extra %}
-<script>
-$(document).ready(function() {
-  // Initialize the tooltip.
-  $('#copy-button').tooltip();
-
-  // When the copy button is clicked, select the value of the text box, attempt
-  // to execute the copy command, and trigger event to update tooltip message
-  // to indicate whether the text was successfully copied.
-  $('#copy-button').bind('click', function() {
-    var input = document.querySelector('#copy-input');
-    input.setSelectionRange(0, input.value.length + 1);
-    try {
-      var success = document.execCommand('copy');
-      if (success) {
-        $('#copy-button').trigger('copied', ['Copied!']);
-      } else {
-        $('#copy-button').trigger('copied', ['Copy with Ctrl-c']);
-      }
-    } catch (err) {
-      $('#copy-button').trigger('copied', ['Copy with Ctrl-c']);
-    }
-  });
-
-  // Handler for updating the tooltip message.
-  $('#copy-button').bind('copied', function(event, message) {
-    $(this).attr('title', message)
-        .tooltip('fixTitle')
-        .tooltip('show')
-        .attr('title', "Copy to Clipboard")
-        .tooltip('fixTitle');
-  });
-});
-</script>
-
-
-{% endblock %}
 {% block title %}{{object.name}}{% endblock %}
 
 {% block content %}
@@ -78,19 +41,13 @@ $(document).ready(function() {
     {% endif %}
     <h5>Retroarch command</h5>
     <p>
-        <form>
-            <div class="input-group">
-                <input type="text" class="form-control"
-                    value="{{object.cmd}}" placeholder="" id="copy-input">
-                <span class="input-group-btn">
-                <button class="btn btn-default" type="button" id="copy-button"
-                    data-toggle="tooltip" data-placement="button"
-                    title="Copy to Clipboard">
-                    Copy
-                </button>
-                </span>
-            </div>
-        </form>
+        <!-- Target -->
+        <input type="text" class="form-control" value="{{object.cmd}}" placeholder="" id="cmd" />
+
+        <!-- Trigger -->
+        <button class="btn" data-clipboard-target="#cmd">
+            <img src="assets/clippy.svg" alt="Copy to clipboard">
+        </button>
     </p>
 
     <p>{{object.description}}</p>