ツールチップをCSSで実装する

@ハクト 2022-01-21 12:47:37に投稿

マウスホバー時に補足説明を表示できるツールチップ。

今回はソーシャルボタンにも利用できるツールチップを作成します。

ツールチップの作り方

ツールチップを表示するボタンを配置

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のカスタマイズや動作確認ができます

長い説明文にも使えるツールチップ

少し長い説明などに最適な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のカスタマイズや動作確認ができます

PR

フリーランスエンジニアに安心保証
動画編集入門プラン（2ヶ月）用LP
ツールチップ ソーシャルボタン css
B!

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter