web-dev-qa-db-fra.com

Info-bulle sur le clic d'un bouton

J'utilise clipboard.js pour copier du texte à partir d'une textarea, et cela fonctionne très bien, mais je souhaite afficher une info-bulle disant "Copié!" s'il a été copié avec succès comme ils le font dans l'exemple donné sur leur site Web. 

Voici un exemple de ce travail sans afficher d’info-bulle: https://jsfiddle.net/5j50jnhj/

javascriptclipboard.js
11
user5368737

Clipboard.js créateur ici. Donc, Clipboard.js n’a pas d’opinion sur les commentaires des utilisateurs, c’est-à-dire qu’il n’ya pas d’infobulle. 

Mais voici un exemple de la façon dont vous pouvez l'intégrer à l'info-bulle de Bootstrap.

// Tooltip

$('button').tooltip({
  trigger: 'click',
  placement: 'bottom'
});

function setTooltip(message) {
  $('button').tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}

function hideTooltip() {
  setTimeout(function() {
    $('button').tooltip('hide');
  }, 1000);
}

// Clipboard

var clipboard = new Clipboard('button');

clipboard.on('success', function(e) {
  setTooltip('Copied!');
  hideTooltip();
});

clipboard.on('error', function(e) {
  setTooltip('Failed!');
  hideTooltip();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary" data-clipboard-text="1">Click me</button>

30
Zeno Rocha

Je le fais comme ça 

HTML:

<button class="test" data-clipboard-text="1">Button 1</button>
<button class="test" data-clipboard-text="1">Button 2</button>

JS:

$('.test').tooltip({
  trigger: 'click',
  placement: 'bottom'
});

function setTooltip(btn, message) {
  btn.tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}

function hideTooltip(btn) {
  setTimeout(function() {
    btn.tooltip('hide');
  }, 1000);
}

var clipboard = new Clipboard('.test');

clipboard.on('success', function(e) {
    var btn = $(e.trigger);
  setTooltip(btn, 'Copied');
  hideTooltip(btn);
});

Avec un lien jsfiddle https://jsfiddle.net/hs48sego/1/

9
binard

*[tooltip]:focus:after {
  content: attr(tooltip);
  display:block;
  position: absolute;    
}
<button tooltip="I'm tooltip">Button</button>
<br><br>
<a href = "javascript:void(0)" tooltip = "I'm tooltip">Link</a>

2
Aikon Mogwai

Voici un violon js qui implémente cela de la même manière que le site Web, j’ai volé le code source: https://jsfiddle.net/bmbs7yco/

les principaux composants de la solution sont: 

function showTooltip(elem, msg) {
    elem.setAttribute('class', 'btn tooltipped tooltipped-s');
    elem.setAttribute('aria-label', msg);
}

clipboard.on('success', function(e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);
    showTooltip(e.trigger, 'Copied!');
  e.clearSelection();
});

et en ajoutant leur primer.css. Une méthode moins paresseuse serait d'extraire les classes du css dont vous avez besoin.

1
Brendon Colburn

J'utilise l'info-bulle JavaScript de Menucool. Il appartient à l’élément déclencheur de décider du mode de lancement de l’info-bulle:

<span onclick="tooltip.pop(this, 'Hello world!')">
    Click me
</span>
0
wcb1

Cette solution fonctionne si vous avez des boutons, etc.:

function setTooltip(e,message) {
  $(e.trigger).tooltip({
  trigger: 'click',
  placement: 'bottom'
});
$(e.trigger).tooltip('hide')
 .attr('data-original-title', message)
 .tooltip('show');
}

function hideTooltip(e) {
  setTimeout(function() {
    $(e.trigger).tooltip('hide');
  }, 1000);
}

// Clipboard

var clipboard = new Clipboard('button');

clipboard.on('success', function(e) {
  setTooltip(e,'Copied!');
  hideTooltip(e);
});

clipboard.on('error', function(e) {
  setTooltip(e,'Failed!');
  hideTooltip(e);
});
0
Altynbek S.