Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

シンプルな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%;
}

参考

kazu69
web関連の仕事してます
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした