javascript - ボタンクリック時のツールチップ

Question

からテキストをコピーするためにclipboard.jsを使用していますtextareaが、それは正常に機能していますが、「コピーされました!」というツールチップを表示したいと考えています。Web サイトに示されている例のようにコピーに成功した場合。

ツールチップを表示せずに動作する例を次に示します: https://jsfiddle.net/5j50jnhj/

Answer 1

Clipboard.js 作成者はこちら。そのため、Clipboard.js はユーザー フィードバックについて意見を述べていません。つまり、ツールチップ ソリューションが付属していません。

ただし、これを 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>

Answer 2

これは、ウェブサイトと同じようにこれを実装する js フィドルです。ソース コードを盗みました: https://jsfiddle.net/bmbs7yco/

ソリューションの主なコンポーネントは次のとおりです。

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();
});

それらのprimer.cssを追加します。それほど怠惰でない方法は、必要な css からクラスを抽出することです。

Answer 3

いくつかのボタンなどがある場合、このソリューションは機能します。

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);
});