【tooltip】オンマウスするとツールチップを出す方法

ちょっとした補足テキストを出したりわかりやすくするためにツールチップ（Tooltip）を出しているページを見かけることがあると思います。

jsのプラグインでTooltipを出すこともできますがjsを使わずにできれば修正するときも楽だしパフォーマンスも上がると思います。

今回はプラグインを使わずCSSのみで作るツールチップを紹介していきます。

ツールチップの作り方

html

<div class="tooltip">
	オンマウスするとツールチップがでるよ
	<span>ツールチップ</span>
</div>

CSS

<style>
.tooltip:hover span{
        animation: tooltips-horz 300ms ease-out forwards;
        display: block;
}
.tooltip{
        position: relative;
        display: inline-block;
}
.tooltip span{
        display: none;
        position: absolute;
        top: -40px;
        left: 50%;
        content: "";
        background: #666;
        min-width: 150px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        padding: 6px 0 7px 0;
        transform: translate(-50%, -.5em);
        opacity: 0;
}
        
.tooltip > span:after{
    position: absolute;
    content: "";
    bottom: -19px;
    left: 50%;
    margin-left: -8px;
    border-top: 10px solid #666;
    border-right: 8px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 8px solid transparent; 
}       
        
@keyframes tooltips-horz {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
</style>

ツールチップがCSSだけで作れてしまうことがわかりましたね。

サンプル