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

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

[jsFiddle](http://jsfiddle.net/kazu69/y2ogh4jh/)で確認できます。

## シンプルツールチップ

### html

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

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

### ツールチップ本体css

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

```css
.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

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

```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;からのアニメーションなのでちょっと冗長になってるけど。

```css

@-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```でラップしておく必要がある。

```html
<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

スタイルは

```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だけ)

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

## 参考

- [MDN:Using the aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute)
- [MDN:Using the aria-label attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute)
- [MDN:content](https://developer.mozilla.org/en-US/docs/Web/CSS/content)