SCSSでツールチップを美しく書く

![tooltip.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/44bf2cfa-1485-61f3-74ec-dacc92c4e143.gif)

HTMLとSCSSでツールチップを作りましょう。
今回作るのは、ハテナマークにホバーをすると説明文が飛び出てくるタイプです。

**自己紹介**
アプリクリエイターの **猫チーズ** です。HTMLとCSS歴は8年になります。
先月デザイン系の大学を卒業し、4月からサイバーブレイン株式会社( メインサービスは[AI Academy](https://aiacademy.jp) )でデザイナーを始めました。

**今回の前提条件**
JavaScriptは使いません。
スタイルシートは[SCSS](https://qiita.com/masamitsu-konya/items/b0557e7ca173a5678c11)（CSSを拡張した言語）で書いています。SCSSとして使っているのはセレクターのネストのみです。

**もくじ**

1. 初期状態の確認
1. マルを書く
1. マルにハテナを入れる
1. 説明文を置く
1. ホバーで表示/非表示を切り替える
1. 吹き出しをフェードイン/アウトさせる
1. 吹き出しの飛び出してる部分をつける
1. 吹き出しの見た目を整える
1. 吹き出しへのホバーを無視する
1. テーマカラーをCSS変数に置き換える

<details>
<summary>**先に完成形のコードをみたい方は、この行をクリックすると下に展開されます。**</summary>
<div>

```HTML
<p>
	Daily Active Users
	<span class='tooltip'><span class='text'>
		本日0:00 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：50人
</p>

<p>
	Weekly Active Users
	<span class='tooltip'><span class='text'>
		一週間前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：650人
</p>

<p>
	Monthly Active Users
	<span class='tooltip'><span class='text'>
		一ヶ月前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：2950人
</p>
```


```SCSS
/* * * プロパティ定義 * * */
:root {
	--color-theme: #49beb7;
}

/* * * ツールチップ全体 * * */
.tooltip {

	/* 位置の情報 */
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* 中身の情報 */
	background: var(--color-theme);
	border-radius: 100%;

	/* * * ハテナマーク * * */
	&::before {

		/* 位置の情報 */
		position: absolute;
		display: inline-block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.6);

		/* 中身の情報 */
		content: '?';
		color: white;
		font-size: 100%;
		font-weight: bold;
	}

	/* * * 説明文 * * */
	.text {

		/* 位置の情報 */
		position: absolute;
		display: block;
		width: 14em;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100%;

		/* 中身の情報 */
		background: var(--color-theme);
		color: white;
		font-size: 12px;
		padding: 10px;
		line-height: 1.4;
		border-radius: 6px;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		pointer-events: none;

		/* アニメーションの情報 */
		transition: all 0.4s ease;
		visibility: hidden;
		opacity: 0;
		bottom: 100%;
		
		/* * * 吹き出しのしっぽ * * */
		&::after {

			/* 位置の情報 */
			position: absolute;
			display: block;
			width: 10px;
			height: 10px;
			left: 50%;
			bottom: -5px;
			transform: rotateZ(45deg) translateX(-50%);
			transform-origin: left;

			/* 中身の情報 */
			content: ' ';
			background: var(--color-theme);
		}
	}

	&:hover {
		.text {
			/* アニメーションの情報 */
			visibility: visible;
			opacity: 1.0;
			bottom: calc(100% + 10px);
		}
	}
}
```

**完成形のコードここまで**

</div>
</details>

# STEP 1 初期状態の確認
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/3827fdd7-8eac-f070-528e-94d44f991860.png)

**HTML:**
上の文字が表示される状態をHTMLだけで書きます。
文字はダミーなので、どんなものでも大丈夫です。

```HTML
<p>Daily Active Users：50人</p>

<p>Weekly Active Users：650人</p>

<p>Monthly Active Users：2950人</p>
```

**SCSS:**
初期状態は空っぽから始めます。

```SCSS
// なし
```

# STEP 2 マルを書く
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/330ef223-c4e3-1d5a-44b7-8211e25ad194.png)

**HTML:**
ホバー用ハテナマークを入れたい部分に`<span class='tooltip'></span>`を入れます。

```HTML
<!-- ビフォー -->
<p>Daily Active Users：50人</p>
```

```HTML
<!-- アフター -->
<p>
	Daily Active Users
	<span class='tooltip'></span>
	：50人
</p>
```

**SCSS:**
`.tooltip` の背景色を塗って灰色の丸を作ります。

```SCSS
/* * * ツールチップ全体 * * */
.tooltip {

	/* 位置の情報 */
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* 中身の情報 */
	background: gray;
	border-radius: 100%;
}
```

<details>
<summary>**コード全文を見る**</summary>
<div>

```HTML
<p>
	Daily Active Users
	<span class='tooltip'></span>
	：50人
</p>

<p>
	Weekly Active Users
	<span class='tooltip'></span>
	：650人
</p>

<p>
	Monthly Active Users
	<span class='tooltip'></span>
	：2950人
</p>
```


```SCSS
/* * * ツールチップ全体 * * */
.tooltip {

	/* 位置の情報 */
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* 中身の情報 */
	background: gray;
	border-radius: 100%;
}
```

</div>
</details>

# STEP 3 マルにハテナを入れる
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/b0a5cb58-4105-b9b3-9bfa-c90c2e3e8a3f.png)

**SCSS:**
`.tooltip { 〜 }`の中に下のコードを書き足します。

```SCSS
/* * * ハテナマーク * * */
&::before {

	/* 位置の情報 */
	position: absolute;
	display: inline-block;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.6);

	/* 中身の情報 */
	content: '?';
	color: white;
	font-size: 100%;
	font-weight: bold;
}
```

`::before`内で`position: absolute;`を使っているため、`.tooltip { /* 位置の情報 */ }`に`position: relative;`を書き足します。

**メモ：**
・`::before`の代わりにHTML側で`<span>？</span>`などを書いてハテナを入れる方法もあります。
・ハテナを文字の代わりに画像で表示する方法もあります。

<details>
<summary>**コード全文を見る**</summary>
<div>

```HTML
<p>
	Daily Active Users
	<span class='tooltip'></span>
	：50人
</p>

<p>
	Weekly Active Users
	<span class='tooltip'></span>
	：650人
</p>

<p>
	Monthly Active Users
	<span class='tooltip'></span>
	：2950人
</p>
```


```SCSS
/* * * ツールチップ全体 * * */
.tooltip {

	/* 位置の情報 */
	position: relative;	// 🐱NEW
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* 中身の情報 */
	background: gray;
	border-radius: 100%;
	
	/* * * ハテナマーク 🐱 * * */
	&::before {

		/* 位置の情報 */
		position: absolute;
		display: inline-block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.6);

		/* 中身の情報 */
		content: '?';
		color: white;
		font-size: 100%;
		font-weight: bold;
	}
}
```

</div>
</details>

# STEP 4 説明文を置く
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/bad9c332-4a4e-7f0a-dc59-0dfb60bbb924.png)

**HTML:**

`<span class='tooltip'> 〜 </span>`の中に下のコードを書き足します。
（`.text`内の説明文はそれぞれ変えます。）

```HTML
<span class='text'>
	本日0:00 〜 現在時刻 までに ログインしたユーザー数の合計
</span>
```

**SCSS:**
`.tooltip { 〜 }`の中に`.text`のスタイルを書き足します。

```SCSS
/* * * 説明文 * * */
.text {
	
	/* 位置の情報 */
	position: absolute;
	display: block;
	width: 14em;
	left: 50%;
	transform: translateX(-50%);
	bottom: 100%;

	/* 中身の情報 */
	background: gray;
	color: white;
	font-size: 12px;
}
```

<details>
<summary>**コード全文を見る**</summary>
<div>

```HTML
<p>
	Daily Active Users
	<span class='tooltip'><span class='text'>
		本日0:00 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：50人
</p>

<p>
	Weekly Active Users
	<span class='tooltip'><span class='text'>
		一週間前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：650人
</p>

<p>
	Monthly Active Users
	<span class='tooltip'><span class='text'>
		一ヶ月前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：2950人
</p>
```


```SCSS
/* * * ツールチップ全体 * * */
.tooltip {

	/* 位置の情報 */
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* 中身の情報 */
	background: gray;
	border-radius: 100%;
	
	/* * * ハテナマーク * * */
	&::before {

		/* 位置の情報 */
		position: absolute;
		display: inline-block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.6);

		/* 中身の情報 */
		content: '?';
		color: white;
		font-size: 100%;
		font-weight: bold;
	}
	
	/* * * 説明文 🐱 * * */
	.text {

		/* 位置の情報 */
		position: absolute;
		display: block;
		width: 14em;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100%;

		/* 中身の情報 */
		background: gray;
		color: white;
		font-size: 12px;
	}
}
```

</div>
</details>

# STEP 5 ホバーで表示/非表示を切り替える
![06.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/66ccb4b3-61b3-eef9-3ac3-0d55705a9a76.gif)

**SCSS:**
`.tooltip .text { 〜 }`の中に次のコードを書き足します。

```SCSS
/* アニメーションの情報 */
visibility: hidden;
```

`.tooltip { 〜 }`の最後に次のコードを書き足します。

```SCSS
&:hover {
	.text {
		/* アニメーションの情報 */
		visibility: visible;
	}
}
```

**メモ:**
・`visibility: hidden;`の代わりに`display: none;`を使って表示/非表示を切り替えることもできますが、displayの切り替えだとアニメーションが効かないため、visibilityを使っています。

<details>
<summary>**コード全文を見る**</summary>
<div>

```HTML
<p>
	Daily Active Users
	<span class='tooltip'><span class='text'>
		本日0:00 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：50人
</p>

<p>
	Weekly Active Users
	<span class='tooltip'><span class='text'>
		一週間前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：650人
</p>

<p>
	Monthly Active Users
	<span class='tooltip'><span class='text'>
		一ヶ月前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：2950人
</p>
```


```SCSS
/* * * ツールチップ全体 * * */
.tooltip {

	/* 位置の情報 */
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* 中身の情報 */
	background: gray;
	border-radius: 100%;
	
	/* * * ハテナマーク * * */
	&::before {

		/* 位置の情報 */
		position: absolute;
		display: inline-block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.6);

		/* 中身の情報 */
		content: '?';
		color: white;
		font-size: 100%;
		font-weight: bold;
	}
	
	/* * * 説明文 * * */
	.text {

		/* 位置の情報 */
		position: absolute;
		display: block;
		width: 14em;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100%;

		/* 中身の情報 */
		background: gray;
		color: white;
		font-size: 12px;
		
		/* アニメーションの情報 🐱 */
		visibility: hidden;
	}
	
	&:hover {
		.text {
			/* アニメーションの情報 🐱 */
			visibility: visible;
		}
	}
}
```

</div>
</details>

# STEP 6 吹き出しをフェードイン/アウトさせる
![06_new.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/99304e74-96d3-9196-88f0-30aa6e259143.gif)


**SCSS:**
`/* アニメーションの情報 */`の2箇所を書き換えます。

1つ目 アニメーション前の状態
`.tooltip .text { /* アニメーションの情報 */ }`

```SCSS
/* アニメーションの情報 */
transition: all 0.4s ease;
visibility: hidden;
opacity: 0;
bottom: 100%;
```

2つ目 アニメーション後の状態
`.tooltip:hover .text { /* アニメーションの情報 */ }`

```SCSS
/* アニメーションの情報 */
visibility: visible;
opacity: 1.0;
bottom: calc(100% + 10px);
```

<details>
<summary>**コード全文を見る**</summary>
<div>

```HTML
<p>
	Daily Active Users
	<span class='tooltip'><span class='text'>
		本日0:00 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：50人
</p>

<p>
	Weekly Active Users
	<span class='tooltip'><span class='text'>
		一週間前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：650人
</p>

<p>
	Monthly Active Users
	<span class='tooltip'><span class='text'>
		一ヶ月前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：2950人
</p>
```


```SCSS
/* * * ツールチップ全体 * * */
.tooltip {

	/* 位置の情報 */
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* 中身の情報 */
	background: gray;
	border-radius: 100%;

	/* * * ハテナマーク * * */
	&::before {

		/* 位置の情報 */
		position: absolute;
		display: inline-block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.6);

		/* 中身の情報 */
		content: '?';
		color: white;
		font-size: 100%;
		font-weight: bold;
	}

	/* * * 説明文 * * */
	.text {

		/* 位置の情報 */
		position: absolute;
		display: block;
		width: 14em;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100%;

		/* 中身の情報 */
		background: gray;
		color: white;
		font-size: 12px;

		/* アニメーションの情報 🐱 */
		transition: all 0.4s ease;
		visibility: hidden;
		opacity: 0;
		bottom: 100%;
	}

	&:hover {
		.text {
			/* アニメーションの情報 🐱 */
			visibility: visible;
			opacity: 1.0;
			bottom: calc(100% + 10px);
		}
	}
}
```

</div>
</details>

# STEP 7 吹き出しにしっぽをつける
![07_new.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/c21b3fd4-415f-e0f5-0aad-9fa95ffb24d9.png)

**SCSS:**
`.tooltip .text { 〜 }`の中に次のコードを書き足します。

```SCSS
/* * * 吹き出しのしっぽ * * */
&::after {

	/* 位置の情報 */
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	left: 50%;
	bottom: -5px;
	transform: rotateZ(45deg) translateX(-50%);
	transform-origin: left;

	/* 中身の情報 */
	content: ' ';
	background: gray;
}
```


<details>
<summary>**コード全文を見る**</summary>
<div>

```HTML
<p>
	Daily Active Users
	<span class='tooltip'><span class='text'>
		本日0:00 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：50人
</p>

<p>
	Weekly Active Users
	<span class='tooltip'><span class='text'>
		一週間前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：650人
</p>

<p>
	Monthly Active Users
	<span class='tooltip'><span class='text'>
		一ヶ月前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：2950人
</p>
```


```SCSS
/* * * ツールチップ全体 * * */
.tooltip {

	/* 位置の情報 */
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* 中身の情報 */
	background: gray;
	border-radius: 100%;

	/* * * ハテナマーク * * */
	&::before {

		/* 位置の情報 */
		position: absolute;
		display: inline-block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.6);

		/* 中身の情報 */
		content: '?';
		color: white;
		font-size: 100%;
		font-weight: bold;
	}

	/* * * 説明文 * * */
	.text {

		/* 位置の情報 */
		position: absolute;
		display: block;
		width: 14em;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100%;

		/* 中身の情報 */
		background: gray;
		color: white;
		font-size: 12px;

		/* アニメーションの情報 */
		transition: all 0.4s ease;
		visibility: hidden;
		opacity: 0;
		bottom: 100%;
		
		/* * * 吹き出しのしっぽ 🐱 * * */
		&::after {

			/* 位置の情報 */
			position: absolute;
			display: block;
			width: 10px;
			height: 10px;
			left: 50%;
			bottom: -5px;
			transform: rotateZ(45deg) translateX(-50%);
			transform-origin: left;

			/* 中身の情報 */
			content: ' ';
			background: gray;
		}
	}

	&:hover {
		.text {
			/* アニメーションの情報 */
			visibility: visible;
			opacity: 1.0;
			bottom: calc(100% + 10px);
		}
	}
}

```

</div>
</details>

# STEP 8 吹き出しの見た目を整える
![09.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/61da9906-0898-e706-19dd-32c791a8b580.gif)

見た目を2つ変更します。
・吹き出しのパディング
・吹き出しの影

**SCSS:**
`.tooltip .text { /* 中身の情報 */ }`を書き換えます。

```SCSS
/* 中身の情報 */
background: gray;
color: white;
font-size: 12px;
padding: 10px;
line-height: 1.4;
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
```

<details>
<summary>**コード全文を見る**</summary>
<div>

```HTML
<p>
	Daily Active Users
	<span class='tooltip'><span class='text'>
		本日0:00 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：50人
</p>

<p>
	Weekly Active Users
	<span class='tooltip'><span class='text'>
		一週間前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：650人
</p>

<p>
	Monthly Active Users
	<span class='tooltip'><span class='text'>
		一ヶ月前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：2950人
</p>
```


```SCSS
/* * * ツールチップ全体 * * */
.tooltip {

	/* 位置の情報 */
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* 中身の情報 */
	background: gray;
	border-radius: 100%;

	/* * * ハテナマーク * * */
	&::before {

		/* 位置の情報 */
		position: absolute;
		display: inline-block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.6);

		/* 中身の情報 */
		content: '?';
		color: white;
		font-size: 100%;
		font-weight: bold;
	}

	/* * * 説明文 * * */
	.text {

		/* 位置の情報 */
		position: absolute;
		display: block;
		width: 14em;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100%;

		/* 中身の情報 🐱 */
		background: gray;
		color: white;
		font-size: 12px;
		padding: 10px;
		line-height: 1.4;
		border-radius: 6px;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);

		/* アニメーションの情報 */
		transition: all 0.4s ease;
		visibility: hidden;
		opacity: 0;
		bottom: 100%;
		
		/* * * 吹き出しのしっぽ * * */
		&::after {

			/* 位置の情報 */
			position: absolute;
			display: block;
			width: 10px;
			height: 10px;
			left: 50%;
			bottom: -5px;
			transform: rotateZ(45deg) translateX(-50%);
			transform-origin: left;

			/* 中身の情報 */
			content: ' ';
			background: gray;
		}
	}

	&:hover {
		.text {
			/* アニメーションの情報 */
			visibility: visible;
			opacity: 1.0;
			bottom: calc(100% + 10px);
		}
	}
}
```

</div>
</details>

# STEP 9 吹き出しへのホバーを無視する
![10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/77aed692-cca0-8224-98c3-24d903b8171a.gif)

吹き出しへのホバーをキャッチしてしまうと、下のような奇妙な体験が発生してしまいます。
![09_b.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/613ad043-2271-c215-ae44-d70684f4468b.gif)

**SCSS:**

`.tooltip .text { /* 中身の情報 */ }` に `pointer-events: none;` を書き足します。

<details>
<summary>**コード全文を見る**</summary>
<div>

```HTML
<p>
	Daily Active Users
	<span class='tooltip'><span class='text'>
		本日0:00 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：50人
</p>

<p>
	Weekly Active Users
	<span class='tooltip'><span class='text'>
		一週間前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：650人
</p>

<p>
	Monthly Active Users
	<span class='tooltip'><span class='text'>
		一ヶ月前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：2950人
</p>
```


```SCSS
/* * * ツールチップ全体 * * */
.tooltip {

	/* 位置の情報 */
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* 中身の情報 */
	background: gray;
	border-radius: 100%;

	/* * * ハテナマーク * * */
	&::before {

		/* 位置の情報 */
		position: absolute;
		display: inline-block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.6);

		/* 中身の情報 */
		content: '?';
		color: white;
		font-size: 100%;
		font-weight: bold;
	}

	/* * * 説明文 * * */
	.text {

		/* 位置の情報 */
		position: absolute;
		display: block;
		width: 14em;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100%;

		/* 中身の情報 */
		background: gray;
		color: white;
		font-size: 12px;
		padding: 10px;
		line-height: 1.4;
		border-radius: 6px;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		pointer-events: none;	// 🐱 NEW

		/* アニメーションの情報 */
		transition: all 0.4s ease;
		visibility: hidden;
		opacity: 0;
		bottom: 100%;
		
		/* * * 吹き出しのしっぽ * * */
		&::after {

			/* 位置の情報 */
			position: absolute;
			display: block;
			width: 10px;
			height: 10px;
			left: 50%;
			bottom: -5px;
			transform: rotateZ(45deg) translateX(-50%);
			transform-origin: left;

			/* 中身の情報 */
			content: ' ';
			background: gray;
		}
	}

	&:hover {
		.text {
			/* アニメーションの情報 */
			visibility: visible;
			opacity: 1.0;
			bottom: calc(100% + 10px);
		}
	}
}
```

</div>
</details>

# STEP 10 テーマカラーをCSS変数に置き換える
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/79d076ab-3205-0941-7ece-82033c0b3c77.png)

**SCSS:**
まずSCSSファイルの一番上に次のコードを書きます。

```SCSS
/* * * プロパティ定義 * * */
:root {
	--color-theme: #49beb7;
}
```

下の3箇所の `background: gray;` を `background: var(--color-theme);` に置き換えます。

・ハテナマークの背景（`.tooltip { /* 中身の情報 */ }`）
・吹き出しの背景（`.tooltip .text { /* 中身の情報 */ }`）
・吹き出しのしっぽの背景（`.tooltip .text::after { /* 中身の情報 */ }`）

<details>
<summary>**コード全文を見る**</summary>
<div>

```HTML
<p>
	Daily Active Users
	<span class='tooltip'><span class='text'>
		本日0:00 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：50人
</p>

<p>
	Weekly Active Users
	<span class='tooltip'><span class='text'>
		一週間前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：650人
</p>

<p>
	Monthly Active Users
	<span class='tooltip'><span class='text'>
		一ヶ月前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：2950人
</p>
```


```SCSS
/* * * プロパティ定義 * * */
:root {
	--color-theme: #49beb7;
}

/* * * ツールチップ全体 * * */
.tooltip {

	/* 位置の情報 */
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* 中身の情報 */
	background: var(--color-theme);	// 🐱 NEW
	border-radius: 100%;

	/* * * ハテナマーク * * */
	&::before {

		/* 位置の情報 */
		position: absolute;
		display: inline-block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.6);

		/* 中身の情報 */
		content: '?';
		color: white;
		font-size: 100%;
		font-weight: bold;
	}

	/* * * 説明文 * * */
	.text {

		/* 位置の情報 */
		position: absolute;
		display: block;
		width: 14em;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100%;

		/* 中身の情報 */
		background: var(--color-theme);	// 🐱 NEW
		color: white;
		font-size: 12px;
		padding: 10px;
		line-height: 1.4;
		border-radius: 6px;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		pointer-events: none;

		/* アニメーションの情報 */
		transition: all 0.4s ease;
		visibility: hidden;
		opacity: 0;
		bottom: 100%;
		
		/* * * 吹き出しのしっぽ * * */
		&::after {

			/* 位置の情報 */
			position: absolute;
			display: block;
			width: 10px;
			height: 10px;
			left: 50%;
			bottom: -5px;
			transform: rotateZ(45deg) translateX(-50%);
			transform-origin: left;

			/* 中身の情報 */
			content: ' ';
			background: var(--color-theme);	// 🐱 NEW
		}
	}

	&:hover {
		.text {
			/* アニメーションの情報 */
			visibility: visible;
			opacity: 1.0;
			bottom: calc(100% + 10px);
		}
	}
}
```

</div>
</details>

# まとめ
![tooltip.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268454/44bf2cfa-1485-61f3-74ec-dacc92c4e143.gif)
今回はHTMLとSCSSでツールチップを作りました。
質問や気になる点があれば、コメントやTwitterで連絡ください！

**HTML:**

```HTML
<p>
	Daily Active Users
	<span class='tooltip'><span class='text'>
		本日0:00 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：50人
</p>

<p>
	Weekly Active Users
	<span class='tooltip'><span class='text'>
		一週間前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：650人
</p>

<p>
	Monthly Active Users
	<span class='tooltip'><span class='text'>
		一ヶ月前 〜 現在時刻 までに ログインしたユーザー数の合計
		</span></span>
	：2950人
</p>
```

**SCSS:**

```SCSS
/* * * プロパティ定義 * * */
:root {
	--color-theme: #49beb7;
}

/* * * ツールチップ全体 * * */
.tooltip {

	/* 位置の情報 */
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* 中身の情報 */
	background: var(--color-theme);
	border-radius: 100%;

	/* * * ハテナマーク * * */
	&::before {

		/* 位置の情報 */
		position: absolute;
		display: inline-block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.6);

		/* 中身の情報 */
		content: '?';
		color: white;
		font-size: 100%;
		font-weight: bold;
	}

	/* * * 説明文 * * */
	.text {

		/* 位置の情報 */
		position: absolute;
		display: block;
		width: 14em;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100%;

		/* 中身の情報 */
		background: var(--color-theme);
		color: white;
		font-size: 12px;
		padding: 10px;
		line-height: 1.4;
		border-radius: 6px;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		pointer-events: none;

		/* アニメーションの情報 */
		transition: all 0.4s ease;
		visibility: hidden;
		opacity: 0;
		bottom: 100%;
		
		/* * * 吹き出しのしっぽ * * */
		&::after {

			/* 位置の情報 */
			position: absolute;
			display: block;
			width: 10px;
			height: 10px;
			left: 50%;
			bottom: -5px;
			transform: rotateZ(45deg) translateX(-50%);
			transform-origin: left;

			/* 中身の情報 */
			content: ' ';
			background: var(--color-theme);
		}
	}

	&:hover {
		.text {
			/* アニメーションの情報 */
			visibility: visible;
			opacity: 1.0;
			bottom: calc(100% + 10px);
		}
	}
}
```

# 猫チーズ
高校一年の頃からアプリ作りに没頭していて、今はアプリクリエイターとしての人生を主軸に生きています。
先月大学を卒業し、4月からサイバーブレイン株式会社でデザイナーをし始めました。

Twitter | Miyauchi Akira
https://twitter.com/miyauchoi

ポートフォリオ | ミヤウチアキラ
https://miyauchi-akira.app

# サイバーブレイン株式会社
[AI Academy](https://aiacademy.jp)
「AIを作りながらAIプログラミングを学ぼう」

Pythonを使った機械学習の教材が無料でたくさんあります。
AIに興味がある方はぜひ。

私はこれから画像生成で遊んでみたいと思います！