【サンプル・デモあり】Bootstrap4でコピーしてTooltip(ツールチップ)を表示する
Webサイトでよくあるコピーボタンを設置したい。
かつ、数秒間ぴょこっと「コピーしました」的な文言をツールチップで表示してコピーしたことを通知したい。
準備するもの
- Bootstrap4
- Font Awesome
この２つ。
Bootstrap4
Bootstrap4を使うと簡単にできそう。
ダウンロードしてきてもいいし、CDNでもいいし。
CDNの場合は、以下をheadタグ内に追加すればよい。
<script>タグはbody終了タグの直前のほうがいい。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>Font Awesome
コピーボタンはアイコンにしたい。
アイコンといえば、Font Awesome。
ダウンロードしてきてもいいし、CDNでもいいし。
CDNの場合は、以下をheadタグ内に追加すればよい。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">使ったアイコンは下記。
Font Awesome clipboard
完成品
コード全文
inputタグ用と、inputタグ以外用をどちらも書いた。
inputタグ以外の場合はtextareaなどを経由しないとコピーできない模様。
（今回はtdタグ）
67、97行目付近のif(copyResult)の分岐は、コピー失敗したことないため雰囲気で書いている。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap4 copy and tooltip sample</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<style>
.copy-btn:hover{
color: #007bff;
}
.table{
width: 250px;
}
</style>
</head>
<body>
<div class="card-body">
<table class="table table-bordered">
<th class="text-primary" colspan="2">サンプル</th>
<tbody>
<tr>
<td class="copy-target">コピーしたいテキスト1</td>
<td class="copy-area">
<button id="copy-td" class="copy-btn d-block mx-auto bg-white border border-secondary rounded" value="コピーしたいテキスト1" data-toggle="tooltip">
<i class="fas fa-clipboard"></i>
</button>
</td>
</tr>
</tbody>
</table>
<input id="copy-target" type="text" value="コピーしたいテキスト2" readonly>
<button id="copy-input" class="copy-btn bg-white border border-secondary rounded" data-toggle="tooltip">
<i class="fas fa-clipboard"></i>
</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
// --------------------------
// td横のボタンクリック時の動作
// --------------------------
$('#copy-td')
// tooltip設定
.tooltip({
trigger: 'manual'
})
// tooltip表示後の動作を設定
.on('shown.bs.tooltip', function(){
setTimeout((function(){
$(this).tooltip('hide');
}).bind(this), 1500);
})
// クリック時の動作を設定
.on('click', function(){
// buttonのvalueを取得
const text = $(this).val();
// tdから直接はコピーできないためテキストエリアを経由
let $textarea = $('<textarea></textarea>');
$textarea.text(text);
$(this).append($textarea);
$textarea.select();
// コピー結果を取得してtextareaは削除
const copyResult = document.execCommand('copy');
$textarea.remove();
// コピー結果によって表示変更
if(copyResult){
$('#copy-td').attr('data-original-title', 'コピーしました');
}else{
$('#copy-td').attr('data-original-title', 'コピー失敗しました');
}
// tooltip表示
$(this).tooltip('show');
});
// -----------------------------
// input横のボタンクリック時の動作
// -----------------------------
$('#copy-input')
// tooltip設定
.tooltip({
trigger: 'manual'
})
// tooltip表示後の動作を設定
.on('shown.bs.tooltip', function(){
setTimeout((function(){
$(this).tooltip('hide');
}).bind(this), 1500);
})
// クリック時の動作を設定
.on('click', function(){
$('#copy-target').select();
const copyResult = document.execCommand('copy');
console.log(copyResult)
// コピー結果によって表示変更
if(copyResult){
$('#copy-input').attr('data-original-title', 'コピーしました');
}else{
$('#copy-input').attr('data-original-title', 'コピー失敗しました');
}
// tooltip表示
$(this).tooltip('show');
});
</script>
</body>
</html>デモページ
いちおうデモページを用意した。ちゃんと動いている。
デモページ
参考
以下のサイトを参考にしました。ありがとうございます。
ボタンを押した直後に BootstrapのTooltipを数秒間表示する方法
jQueryでクリップボードにコピーする方法｜コピペ
