【サンプル・デモあり】Bootstrap4でコピーしてTooltip(ツールチップ)を表示する

2021年1月24日プログラムBootstrap4,jQuery,tooltip,コピー,ツールチップ

Webサイトでよくあるコピーボタンを設置したい。
かつ、数秒間ぴょこっと「コピーしました」的な文言をツールチップで表示してコピーしたことを通知したい。

スポンサーリンク

準備するもの

  • Bootstrap4
  • Font Awesome

この2つ。

Bootstrap4

Bootstrap4を使うと簡単にできそう。

Bootstrap4 Tooltips

ダウンロードしてきてもいいし、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。

Font Awasome

ダウンロードしてきてもいいし、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でクリップボードにコピーする方法|コピペ

ninki_glog_ranking
ブログランキング・にほんブログ村へ

スポンサーリンク