Tooltip sur le clic d'un bouton

Clipboard.js créateur ici. Par conséquent, Clipboard.js n'a pas d'opinion sur les commentaires de l'utilisateur, ce qui signifie qu'il ne comporte pas de solution d'outils.

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

 // 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> 

Je l'aime 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 le lien jsfiddle https://jsfiddle.net/hs48sego/1/

Voici un js violon qui met en œuvre cette façon de faire le site Web, j'ai volé le code source: https://jsfiddle.net/bmbs7yco/

Les principaux composants de la solution sont les suivants:

 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.