私は clipboard.js を使用してtextarea
からテキストをコピーしていますが、それはうまく機能していますが、「コピーしました!」というツールチップを表示したいです。ウェブサイトに掲載されている例のようにコピーに成功した場合。
ツールチップを表示せずに動作する例を次に示します。 https://jsfiddle.net/5j50jnhj/
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>
私はそれを好きです
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);
});
Jsfiddleリンクを使用 https://jsfiddle.net/hs48sego/1/
*[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>
以下は、Webサイトが行う方法でこれを実装する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を追加します。怠laな方法は、必要なcssからクラスを抽出することです。
Menucool JavaScript Tooltipを使用しています。ツールチップの起動方法を決定するのはトリガー要素に任されます。
<span onclick="tooltip.pop(this, 'Hello world!')">
Click me
</span>
このソリューションは、ボタンなどがある場合に機能します:
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);
});