ウェブサイトに吹き出しを表示する方法について

あまプロではHTMLを使ってウェブサイトを作成する事が有ります。
HTML + CSS + JavaScriptでボタンクリック時に少しだけ通知を表示する機能をあメログ。

ボタンクリック時に通知を少しだけ表示するにはアニメーションを使います。

HTML

<button
 type="button"
 onclick="document.getElementById( 'msg').classList.add( 'clicked');"
 title="クリックして下さい"
 onanimationend="document.getElementById( 'msg').classList.remove( 'clicked');">
    くりっく
    <span id="msg">クリックしました</span>
</button>

CSS

#msg {
    color: gray;
    background-color: aqua;
    padding: 0.5em;
    left: 10em;
    width: 19em;
    position: absolute;
    z-index: 2;
    opacity: 0;
}
.clicked {
    animation: clickAnime 2s;
}
@keyframes clickAnime {
    0% { opacity: 1;}
    50% { opacity: 1;}
    100% { opacity: 0;}
}

JQueryを使っている場合は
document.getElementById( 'msg').classList.add( 'copied');
document.getElementById( 'msg').classList.remove( 'copied');
を
$( '#msg').addClass(  'copied');
$( '#msg').removeClass(  'copied');
の様に簡略化出来ます。

説明すると、
「クリックしました」メッセージは手前のレイヤz-index: 2;にopacity: 0で透明つまり非表示にしときます。ボタンの側に絶対座標position: absolute;で配置します。
onclickのイベントでclickedクラスを追加します。
clickedクラスにはアニメーションのclickAnimeが定義されてます。
clickAnimeは段々透明つまり非表示にしていくアニメです。 これを2秒間で一回再生します。
onanimationendのイベントで、clickedクラスを削除します。クラスを削除する事で、何度でもクラスを追加する事が出来、つまり何度でもアニメーションを再生、つまり何度でもメッセージを表示さす事が出来ます。

JQueryにするならTooltipsterの様な吹き出しツールチップ用のプラグインも有って表現も豊富になります。
ですが、仕組みを理解していれば何でも好きに作れる様になるのが利点です。