Copy content button, and display a message right after you click it to copy

Question

In my case, I want to make a button to copy the short link of a site, ie do not need to display the text, just have the fontawesome icon <i class="fas fa-copy"></i> that is, a button with the icon, without showing the text with the content equal to the example below. that is, when you click the button it copied the short url of the site.

EXAMPLE FROM ANOTHER SITE

Answer 1

You can use the library Clipboardjs to copy or cut out some text.

Example #1:

const clipboard = new ClipboardJS('.btn')

clipboard.on('success', function(e) {
    alert("Texto copiado")
});

clipboard.on('error', function(e) {
    alert("Falha ao copiar texto")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

<button class="btn" data-clipboard-text="Valdeir Psr">Copiar</button>

Example #2:

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    
    /* Captura o nome original do botão */
    let textOriginal = e.trigger.textContent;
    
    /* Adiciona tooltip */
    e.trigger.classList.add("copied")
    
    /* Remove tooltip após 2 segundos */
    setTimeout( _ => {
      e.trigger.classList.remove("copied")
    }, 2000)

    e.clearSelection();
});

/**
 * Tooltip Styles
 * Author Tooltip Styles: https://chrisbracco.com/a-simple-css-tooltip/
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: -129%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: -20%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-bottom: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip].copied:before,
[data-tooltip].copied:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

<link href="https://clipboardjs.com/bower_components/primer-css/css/primer.css" rel="stylesheet"/>
<link href="https://clipboardjs.com/assets/styles/main.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

<!-- Target -->
<textarea id="bar" rows="10" cols="50"><iframe width="560" height="315" src="https://www.youtube.com/embed/bz5yLUhvCbk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></textarea>

<!-- Trigger -->
<button data-tooltip="Copiado" class="btn" data-clipboard-target="#bar">
    Copiar para área de transferência
</button>

If you are using the Boostrap, just use $("#element").tooltip("show") to display the message.