【CSSのみで作れる】ツールチップの簡単な実装方法

# 概要
カーソルを合わせると出てくるツールチップを作成する。CSSのみで作れるらしい。またスマホ（タッチデバイス）を考慮した実装。
ちなみにツールチップってのは下みたいにカーソルを合わせるとヒントが出てくるヤツ。

##実装例
https://gamin27.github.io/arekore/st_css/0001_tooltip/


<img width="230" alt="スクリーンショット 2020-03-25 11.39.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378497/292f59b6-2a99-a81a-9a08-460437ee11f1.png">

# 詳細
擬似クラスを組み合わせるとPCとスマホ両方に対応できます。

## PC
カーソルを合わせるとツールチップがでる。擬似クラスである
`:hover`
で対応。

## スマホ（タッチデバイス）
触るとツールチップがでる。擬似クラスである
`:focus`
で対応。

# 実装
## 骨組み
最低限の実装をすると、

```html:HTML
詳しくは
<a href="#" class="tooltip" aria-label="これはツールチップの例です。">
	ヒント
</a>
をご覧ください。
```

```scss:Scss
@mixin not-custom() {
  content: attr(aria-label);
  display: block;
  position: absolute;
}

.tooltip {
  position: relative;
  color: goldenrod;
  display: inline-block;

  &:focus {
    &:after {
      @include not-custom();
    }
  }
  &:hover {
    &:after {
      @include not-custom();
    }
  }
}
```
[attr()の使い方...](https://qiita.com/homusuke/items/b34822800c67a964e909)

###結果
<img width="347" alt="スクリーンショット 2020-03-25 11.52.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378497/fdc54a71-763d-f896-a7c7-1261c3997ac9.png">

マウスを合わせると...

<img width="305" alt="スクリーンショット 2020-03-25 11.53.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378497/63af99ed-f9c9-a7ea-93c1-cd216fdebb2d.png">

って感じ大枠は完成。

##体裁を整える

体裁用の共通mixinを作る。（mixinじゃなくていいけど）

```scss:Scss
/*体裁カスタマイズ*/
@mixin custom() {
  top: 100%;
  left: -25%;
  font-size: 1.2rem;
  background-color: #4e4e4e;
  color: #fff;
  margin-top: 0.8rem;
  border-radius: 0.2rem;
  padding: 0.4rem;
  width: 12rem;
  text-align: left;
}
```

作ったmixinをincludeする。

```scss:Scss
.tooltip {
  position: relative;
  color: goldenrod;
  display: inline-block;

  &:focus {
    &:after {
      @include not-custom();
      //追加
      @include custom();
    }
  }
  &:hover {
    &:after {
      @include not-custom();
      //追加
      @include custom();
    }
  }
}
```

おまけでbodyも整える。

```scss:Scss
/*体裁カスタマイズ*/
body {
  padding: 4rem;
  text-align: center;
  font-size: 2rem;
}
```

###結果

<img width="561" alt="スクリーンショット 2020-03-25 12.15.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378497/4bed9a91-8b30-f675-4cba-27f599d3315d.png">


マウスカーソルを合わせると...

<img width="607" alt="スクリーンショット 2020-03-25 12.14.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378497/0e333321-b6dd-852f-3071-f974d0d55142.png">

良い感じや！

##矢印も添える

三角矢印はcssのみで作れる。

```scss:Scss

/*三角ができる*/
@mixin arrow() {
  position: absolute;
  display: block;
  content: "";
  top: 100%;
  right:0;
  left: 0;
  margin: -1rem auto 0;
  border: 1rem solid transparent;
  border-bottom-color: #4e4e4e;
  height: 0;
  width: 0;
}
```

tooltipクラスのbeforeに追加してやる。

```scss:Scss

.tooltip {
  position: relative;
  color: goldenrod;
  display: inline-block;

  &:focus {
    //追加
    &:before {
      @include arrow();
    }
    &:after {
      @include not-custom();
      @include custom();
    }
  }
  &:hover {
    //追加ｓ
    &:before {
      @include arrow();
    }
    &:after {
      @include not-custom();
      @include custom();
    }
  }
}
```

###結果
矢印（三角）がで装飾されました。完成です。

<img width="564" alt="スクリーンショット 2020-03-25 12.31.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378497/3fe5ae9e-2e12-f572-eca1-40c77250fd57.png">