CSS入門 | CSS応用 | ツールチップ効果

Tags:

ツールチップ効果

対象の要素にマウスを乗せると追加情報が表示される効果を、ツールチップ（tooltip）効果という。
CSSを利用すると、このようなツールチップ効果を簡単に設定できる。

次の例は、visiblilityプロパティを利用してツールチップ効果を実装する例である。

<style>
    .tooltip { position: relative; display: inline-block; }
    .tooltip .tooltip-content {
        visibility: hidden;
        width: 300px;
        background-color: orange;
        padding: 0;
        margin-top: 10px;
        color: white;
        text-align: center;
        position: absolute;
        z-index: 1;
    }
    .tooltip:hover .tooltip-content { visibility: visible; }
</style>

CSSを利用すると、ツールチップ（tooltip）が表示される位置も簡単に設定できる。
CSSの相対位置を表す top、right、bottom、left プロパティを利用して、ツールチップの相対位置を設定できる。

次の例は、ツールチップが対象要素の下側ではなく左側に表示されるように実装した例である。

<style>
    .tooltip { margin: auto; }
    .tooltip .tooltip-content { top: -15px; right: 105%; }
</style>

次の例は、対象要素にマウスを乗せるとツールチップが上側に表示されるように実装した例である。

<style>
    .tooltip { margin: auto; }
    .tooltip .tooltip-content { bottom: 100%; left: 50%; margin-left: -150px; }
</style>

また、次の例のようにツールチップ（tooltip）の形を吹き出しのように設定することもできる。

<style>
    .tooltip .tooltip-content::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -10px;
        border-width: 10px;
        border-style: solid;
        border-color: orange transparent transparent transparent;
    }
</style>

上の例でツールチップの吹き出し形状は、border-colorプロパティ値を transparent に設定することで実装できる。

transparent プロパティ値は透明を意味する。