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

Question

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

Navigation

#1 by (2 votes)

0

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 icon of fontawesome <i class="fas fa-copy"></i> ie a button with the icon, without showing the text with the content the same as the example below. that is, when you clicked the button it copied the short url of the site.

EXAMPLE OF ANOTHER SITE

php javascript html

asked by anonymous 30.04.2018 / 05:37

1 answer

How to use AutoMapper 6.2.2 in Asp MVC5? How to show the record that was most repeated in the MYSQL table?

score 2 · Accepted Answer

You can use the ClipboardJS library to copy or cut 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><buttonclass="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--><textareaid="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 Boostrap , simply use $("#element").tooltip("show") to display the message.