ツールチップは、最初表示されていない状態で、対象にカーソルを合わせると周辺に小さな領域が出現し、注釈などが表示されるものです。
このカーソルを載せた場合の表示・非表示はCSSだけで簡単にできますが、クリックトリガーの場合は、jQueryで書いてあげると簡単に実装できます。
この記事は、そんなjQueryのスニペットについて解説していきます。
デザインサンプル
早速デザインサンプルです。応用した場合のサンプルもあるので、順にご覧ください。
クリックでツールチップを表示・非表示サンプル
指定したclassが付いているところをクリックするとツールチップがゆっくりと表示されます。
参考になって良かったです。
上記のサンプルは、tootiplink のclassをトリガーにしています。
classをトリガーにできるので、汎用性は高いです。
スニペットを応用させて表内のヘルプで使用
| 項目 | 内容 |
|---|---|
| 日本 ?
日本の人口は近年横ばいであり、人口減少局面を迎えている。
|
緑の多い国です。 |
| アメリカ | 自由の国です。 |
| スペイン | 情熱の国です。 |
コピペ用コード一式
HTML・CSS・jQueryのコピペ用コード一式です。
jQueryは、<body>〜</body> のクロージングタグ前に記述しましょう。
コードを表示する
<div class="help_area">
<a class="tootiplink"><i class="fas fa-mouse"></i> ここをクリック</a>
<!-- tooltipの中身 -->
<div class="tooltip">
<div class="tooltip_inner">
<img src="https://dubdesign.net/wp-content/uploads/2021/09/smilewhite.svg" alt="smile">
<p>参考になって良かったです。</p>
</div>
</div>
<!-- tooltipの中身 -->
</div>.help_area {
position: relative;
text-align: center;
margin:30px 0 60px;
}
.help_area a {
padding: 20px 30px;
position: relative;
text-decoration: none;
color: #fff;
font-weight: 700;
background: #80C6FF;
border-bottom: solid 4px #6BB6FF;
font-size: 1.1rem;
border-radius: 5px;
transition: 0.3s ease-in-out;
}
.tooltip {
position: absolute;
background-color: rgb(107,182,255,0.8);
color: white;
border-radius: 0.3em;
padding: 0;
margin: 0.3em 0 0 0;
display: none;
bottom: 65px;
left: 50%;
transform: translateX(-50%);
animation-name: fade-in;
animation-duration: 0.5s;
}
.tooltip:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top: 10px solid rgb(107,182,255,0.8);
}
.tooltip_inner {
display: flex;
justify-content: space-around;
align-items: center;
padding: 15px 20px 15px;
flex-wrap: nowrap;
}
.tooltip_inner img {
width: 30%;
padding-right: 7%;
}
.tooltip_inner p {
width: 70%;
text-align: left;
margin: 0;
font-weight: 500;
line-height: 1.4;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}document.querySelectorAll('.tootiplink').forEach (elm => {
elm.onclick = function () {
event.stopPropagation();
let tooltip = this.parentNode.querySelector('.tooltip');
if (tooltip.style.display == 'block') {
tooltip.style.display = 'none';
} else {
tooltip.style.display = 'block';
}
};
});
document.body.onclick = function () {
document.querySelectorAll('.tooltip').forEach (tooltip => {
tooltip.style.display = 'none';
});
};ざっくりとしたコードの解説
CSS：fade-in
クリックして表示される吹き出しは、keyframesとanimationを組み合わせて opacityの0％〜100％で、徐々にフェードインをするアニメーションの定義します。
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}アニメーションを定義したら、クリックするとdisplay がblockとnoneに切り替わるclassに以下のCSSを記述すれば、フェードインします。
animation-name: fade-in;
animation-duration: .5s;さいごに
記事を書きながら、最後に「そういえば・・・。」で思い出しました。
おんなじような動作のjQueryで、toggleClass() があります。toggleClass() は簡単な構文で、以下のような動作になります。
ボタンが開閉のトリガーになるので、その他の部分をクリックしても発火しませんが、ちょっとカスタマイズすればこっちでも色々できるので、また後日、別記事にしてみます。
