シンプルなhtmlとcssのみでできるツールチップ

シンプルなhtmlとcssのみでツールチップを実現してみる。

jsFiddleで確認できます。

シンプルツールチップ

html

<span class="tooltip bottom" aria-label="tooltip here" >
  text hover show tooltip bottom
</span>

とする。aria-labelの内容をcontent プロパティの値として、ツールチップの吹き出しに表示する。

ツールチップ本体css

cssは吹き出しはafter擬似要素。
矢印はbefore擬似要素で実現する。

.tooltip:after
{
    position: absolute;
    z-index: 9999;

    display: none;

    padding: 5px 8px;

    content: attr(aria-label);
    text-align: center;
    white-space: pre;
    text-decoration: none;
    letter-spacing: normal;
    text-transform: none;
    word-wrap: break-word;

    opacity: 0;
    color: #fff;
    border-radius: 3px;
    background: rgba(0, 0, 0, .8);
    background-color: #333;
    text-shadow: none;

    font-smoothing: subpixel-antialiased;
}

.tooltip:before
{
    position: absolute;
    z-index: 10000;

    display: none;

    width: 0;
    height: 0;

    content: '';

    opacity: 0;
    color: #333;
    color: rgba(0, 0, 0, .8);
    border: 5px solid transparent;
}

.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:active:before,
.tooltip:active:after,
.tooltip:focus:before,
.tooltip:focus:after
{
    display: inline-block;

    -webkit-animation-name: fadein;
            animation-name: fadein;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    text-decoration: none;

    opacity: 1;
}

吹き出しの位置css

吹き出しの表示位置を別途クラスで指定する

.tooltip.bottom:after,
.tooltip.bottom-right:after,
.tooltip.bottom-left:after
{
    top: 100%;
    right: 50%;

    margin-top: 4px;
}

.tooltip.bottom:before,
.tooltip.bottom-left:before,
.tooltip.bottom-right:before
{
    top: auto;
    right: 50%;
    bottom: -4px;

    margin-right: -5px;

    border-bottom-color: rgba(0, 0, 0, .8);
}

.tooltip.bottom:after
{
    right: 0;
    left: 0;
}

.tooltip.bottom-right:after
{
    right: auto;
    left: 50%;

    margin-left: -15px;
}

.tooltip.bottom-left:after
{
    margin-right: -15px;
}

.tooltip.top:after,
.tooltip.top-left:after,
.tooltip.top-right:after
{
    right: 50%;
    bottom: 100%;

    margin-bottom: 4px;
}

.tooltip.top:before,
.tooltip.top-left:before,
.tooltip.top-right:before
{
    top: -4px;
    right: 50%;
    bottom: auto;

    margin-right: -5px;

    border-top-color: rgba(0, 0, 0, .8);
}

.tooltip.top-right:after
{
    right: auto;
    left: 50%;

    margin-left: -15px;
}

.tooltip.top-left:after
{
    margin-right: -15px;
}

.tooltip.top:after
{
    right: 0;
    left: 0;
}

.tooltip.left:after
{
    right: 100%;
    bottom: 50%;

    margin-right: 8px;

    transform: translateY(50%);
}

.tooltip.left:before
{
    top: 50%;
    bottom: 50%;
    left: -8px;

    margin-top: -4px;

    border-left-color: #333;
    border-left-color: rgba(0, 0, 0, .8);
}

.tooltip.right:after
{
    bottom: 50%;
    left: 100%;

    margin-left: 8px;

    transform: translateY(50%);
}

.tooltip.right:before
{
    top: 50%;
    right: -8px;
    bottom: 50%;

    margin-top: -5px;

    color: #333;
    border-right-color: rgba(0, 0, 0, .8);
}

アニメーション

アニメーションでふわっと出るようにする。
display: none;からのアニメーションなのでちょっと冗長になってるけど。

@-webkit-keyframes fadein
{
    0%
    {
        display: none;

        opacity: 0;
    }
    1%
    {
        display: block;

        opacity: 0;
    }
    100%
    {
        display: block;

        opacity: 1;
    }
}

@keyframes fadein
{
    0%
    {
        display: none;

        opacity: 0;
    }
    1%
    {
        display: block;

        opacity: 0;
    }
    100%
    {
        display: block;

        opacity: 1;
    }
}

input:focusでツールチップ

html

input要素にfocusで表示するものも作成した。
この場合はrole="tooltip"なものがツールチップの吹き出しになる。
input要素にaria-describedby でツールチップを参照する。

吹き出しの位置をabsoluteで操作したいので、
input要素自体はposition: reletiveでラップしておく必要がある。

<div class="relative">
    <input type="text" placeholder="input forcus show tooltip" aria-describedby="input-tooltip">
    <div role="tooltip" class="tooltip bottom" id="input-tooltip">tooltip fot form</div>
</div>

ツールチップの本体のcss

スタイルは

input + .tooltip[role='tooltip']
{
    position: absolute;
    z-index: 9999;

    padding: 5px 8px;

    text-align: center;
    white-space: pre;
    text-decoration: none;
    letter-spacing: normal;
    text-transform: none;
    word-wrap: break-word;

    color: #fff;
    border-radius: 3px;
    background: rgba(0, 0, 0, .8);
    background-color: #333;
    text-shadow: none;

    font-smoothing: subpixel-antialiased;
}

input + .tooltip[role='tooltip']
{
    position: absolute;
    z-index: 9999;

    display: none;

    padding: 5px 8px;

    content: attr(aria-label);
    text-align: center;
    white-space: pre;
    text-decoration: none;
    letter-spacing: normal;
    text-transform: none;
    word-wrap: break-word;

    opacity: 0;
    color: #fff;
    border-radius: 3px;
    background: rgba(0, 0, 0, .8);
    background-color: #333;
    text-shadow: none;

    font-smoothing: subpixel-antialiased;
}

input:focus + .tooltip[role='tooltip']
{
    top: 100%;

    display: block;

    margin-top: 4px;

    -webkit-animation-name: fadein;
            animation-name: fadein;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    text-decoration: none;

    opacity: 1;
}

input:focus + .tooltip[role='tooltip']:before
{
    display: block;

    -webkit-animation-name: fadein;
            animation-name: fadein;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    text-decoration: none;

    opacity: 1;
}

表示位置css

表示位置は別途で
(割愛してbottomだけ)

input + .tooltip.bottom[role='tooltip']:before
{
    bottom: 100%;
}

参考

• MDN:Using the aria-describedby attribute
• MDN:Using the aria-label attribute
• MDN:content