HTMLとCSSだけでツールチップを作成

作成日 2020.12.10
CSS
CSS3

HTMLとCSSだけでツールチップを作成する簡単なサンプルコードとデモを記述してます。

1. 環境
2. ツールチップとは
3. サンプルコード
4. ブラウザ上で表示した結果

環境

OS windows10 64bit
chrome 86.0.4240.198

ツールチップとは

ツールチップとは対象の要素にマウスオーバーした際に表示される補足説明などのことを言います。

サンプルコード

以下はHTMLとCSSだけでツールチップを作成するサンプルコードとなります。

<style>
    .tooltip{
        position: relative;
        cursor: pointer;
        display: inline-block;
        background: #efefef;
        padding: 20px 0 0 20px;
        width: 100%;
        border-radius: 2px;
        margin-bottom: 100px;
    }
    .tooltip_target{
        margin:0;
        padding:0;
        font-size: 1.2em;
        padding: 0.2em;
    }
    .tooltip_description {
        display: none;
        position: absolute;
        padding: 10px;
        font-size: 12px;
        line-height: 1.6em;
        color: #fff;
        border-radius: 5px;
        background: #37b507;
        width:50%;
    }
    .tooltip_description:before {
        content: "";
        position: absolute;
        top: -24px;
        left: 10%;
        border: 15px solid transparent;
        border-top: 15px solid #37b507;
        margin-left: -15px;
        transform: rotateZ(180deg);
    }
    .tooltip:hover .tooltip_description{
        display: inline-block;
        top: 60px;
        left: 0px;
    }
</style>

<div class="tooltip">
    <p><a href="#" class="tooltip_target">この部分</a>をマウスオーバー、スマホの場合はタップしてください。</p>
    <div class="tooltip_description">吹き出しの位置は「.tooltip:hover .tooltip_description」で指定して、吹き出しの矢印は「transform: rotateZ(180deg);」回転できます。 </div>
</div>