以前Vue.jsでカラーコードからRGB値にサクッと変換する方法という記事で紹介した、「Quick HEX to RGB」では、値をクリックすればクリップボードにコピーする機能をつけています。これはclipboard.jsを使っているので、基本的な使い方と、あまり説明のないツールチップの加え方を紹介します。

↑私が10年以上利用している会計ソフト！

clipboard.js の使い方

Webサイト｜GitHub

まずはHTMLにJavaScriptのファイルを読み込ませましょう。ファイルをダウンロードする場合はGitHubからdistフォルダーにある「clipboard.min.js」ファイルを入手します。CDNも用意されているので、便利な方を使ってください。

HTML

<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>

clipboard.jsのWebサイトでも公開されているデモを見てみましょう。ボタンをクリックするとテキストフィールド内のテキストをコピーします。

JavaScript

new ClipboardJS('.btn');

JavaScriptに記述しているのはこれだけでOK！btnというクラスのついた要素をクリックすると、ターゲットとなるテキストをコピーします。

HTML

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">Copy</button>

あとはターゲットとなる要素にIDを与え、ボタンの方に data-clipboard-target="#foo" でIDを指定します。簡単ですね！

クリックした部分のテキストをコピーする

See the Pen
clipboard.js Demo by Mana (@manabox)
on CodePen.

要素を指定してテキストをコピーするのではなく、コピーするテキストを直接指定する場合は data-clipboard-text 属性を指定します。例えばこの表のようにデータ部分をクリックするとそのデータをコピーしたいときに使えますね。

HTML

<table>
  <tr>
    <th>カロリー</th>
    <td class="copy-value" data-clipboard-text="303kcal">303kcal</td>
  </tr>
</table>

JavaScript

new ClipboardJS('.copy-value');

「コピー完了」のツールチップを表示する

ただ、このままだとコピーできているのかわかりづらいので、「コピー完了」がわかるツールチップを表示したいところ。clipboard.jsのWebサイトでは

Each application has different design needs, that’s why clipboard.js does not include any CSS or built-in tooltip solution.

アプリによってデザインって違うよね。だからclipboard.jsにはCSSを含めてないし、備え付けのツールチップも用意してないよ。

とあっさり書かれているだけなので、ツールチップを表示させるためにちょっとカスタマイズ。

JavaScript

const clipboard = new ClipboardJS('.copy-value');

// Select all .copy-value items
const btns = document.querySelectorAll('.copy-value');

// Remove .tooptip class by mouseout
for(let i=0;i<btns.length;i++){
    btns[i].addEventListener('mouseleave',clearTooltip);
}
function clearTooltip(e){
    e.currentTarget.setAttribute('class','copy-value');
}

// Add .tooltip class when it's clicked
function showTooltip(elem){
    elem.setAttribute('class','copy-value tooltip');
}

clipboard.on('success', function(e) {
    showTooltip(e.trigger);
});

document.querySelectorAll('.copy-value'); で copy-value というクラスを取得。関数で elem.setAttribute('class','copy-value tooltip'); と記述して、クリックしたら tooltip というクラスを加えます。その tooltip クラスの要素にCSSで装飾をしていきます。また、テキストからカーソルが外れたらツールチップを消したいので、addEventListener('mouseleave',clearTooltip); を使って付与されるクラスが copy-value だけになるように設定。

ツールチップの装飾は表示位置をテキストの真下にくるよう position プロパティーを使ってあれこれ書き込んでいます。アニメーションを加えたりしちゃったりして。ツールチップ内のテキストは content プロパティーで指定しています。

CSS

.copy-value {
  cursor: pointer;
  position: relative;
}

/* Tooltip */
.tooltip::after {
    content: 'Copied!';
    background: #555;
    display: inline-block;
    color: #fff;
    border-radius: .4rem;
    position: absolute;
    left: 50%;
    bottom: -.8rem;
    transform: translate(-50%, 0);
    font-size: .75rem;
    padding: 4px 10px 6px 10px;
    animation: fade-tooltip .5s 1s 1 forwards;
}

/* Animation */
@keyframes fade-tooltip {
  to { opacity: 0; }
}

完成！

See the Pen
clipboard.js Demo w/ tooltips by Mana (@manabox)
on CodePen.

こんな感じでできあがりました！

公開しているツール「Quick HEX to RGB」でも同じ仕様になっています。ぜひ試してみてくださいね！