マウスホバー時に補足説明を表示できるツールチップ。
今回はソーシャルボタンにも利用できるツールチップを作成します。
ツールチップの作り方
ツールチップを表示するボタンを配置
aタグに「tooltip」クラスを追加。「tooltip-title」属性にツールチップで表示するテキストを設定します。
<a href="#" class="btn-twitter tooltip" tooltip-title="Twitter">
<i class="fab fa-twitter"></i>
</a>
.btn-twitter {
padding: 1rem;
box-sizing: border-box;
border-radius: 0.2rem;
background-color: #333;
color: white;
text-align: center;
text-decoration: none;
}
ホバー時にツールチップを表示
「before」疑似要素で表示位置を調整し「content」の「attr」関数で「tooltip-title」属性の値を指定。
.tooltip {
position: relative;
}
.btn-twitter:hover {
background-color: #369BEE;
}
.tooltip:hover::before,{
position: absolute;
top: -35px;
left: 50%;
transform: translateX(-50%);
padding: 0.3rem 0.7rem;
background-color: #369BEE;
content: attr(tooltip-title);
}吹出口を作る
「after」疑似要素を追加し「border」プロパティで「吹出口」を作っています。
.tooltip:hover::before,
.tooltip:hover::after {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.tooltip:hover::before {
...
}
.tooltip:hover::after {
top: -10px;
border: 5px solid transparent;
border-top-color: #369BEE;
content: '';
}全てのソース
コードを表示
<a href="#" class="btn-twitter tooltip" tooltip-title="Twitter"><i class="fab fa-twitter"></i></a>.btn-twitter {
padding: 1rem;
box-sizing: border-box;
border-radius: 0.2rem;
background-color: #333;
color: white;
text-align: center;
text-decoration: none;
}
.tooltip {
position: relative;
}
.btn-twitter:hover {
background-color: #369BEE;
}
.tooltip:hover::before,
.tooltip:hover::after {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.tooltip:hover::before {
top: -35px;
padding: 0.3rem 0.7rem;
background-color: #369BEE;
content: attr(tooltip-title);
}
.tooltip:hover::after {
top: -10px;
border: 5px solid transparent;
border-top-color: #369BEE;
content: '';
}
このWEBパーツを確認する
HTML・CSSのカスタマイズや動作確認ができます
長い説明文にも使えるツールチップ
before、after疑似要素でツールチップを作成しています
コードを表示
<a href="#" class="btn-question tooltip" tooltip-title="ツールチップの使い方。ツールチップの使い方。">?</a>.btn-question {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
box-sizing: border-box;
border-radius: 50%;
background-color: #333;
color: white;
text-align: center;
text-decoration: none;
}
.tooltip {
position: relative;
}
.tooltip:hover::before,
.tooltip:hover::after {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.tooltip:hover::before {
bottom: 120%;
width: 200px;
padding: 0.3rem 0.7rem;
background-color: #333;
line-height: 1.5;
content: attr(tooltip-title);
}
.tooltip:hover::after {
bottom: 95%;
border: 5px solid transparent;
border-top-color: #333;
content: '';
}
このWEBパーツを確認する
HTML・CSSのカスタマイズや動作確認ができます
