CSSのみで作る幅可変ツールチップ

コード

HTML

<button>ボタン<span class="tooltip"><span class="text">テキスト</span></span></button>

CSS

button {
	position: relative;
}
.tooltip {
	visibility: hidden;
	text-align: center;
	position: absolute;
	z-index: 1;
	opacity: 0;
	transition: opacity 500ms;
	width: 120px;
	bottom: 125%;
	left: 50%; 
	margin-left: -60px;
}
.tooltip > .text {
	background-color: black;
	color: #fff;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 12px;
	display: inline-block;
}
.tooltip > .text::after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}
button:hover > .tooltip {
	visibility: visible;
	opacity: 1;
}

ポイントは.tooltipを幅固定にし、その中で幅可変な.textを置き、.textの方で背景色を設定するところです。

CSS Tooltipでは.tooltipに直接テキストを置いているため幅が固定されてしまい、短いテキストの場合大きな余白が生まれてしまいますが、上記のように外側（透過）と内側（テキスト＋背景色）の2層構造にすればテキストの幅に合わせてツールチップの幅が決まります。

ツールチップの外側は以下のように幅を設定し、その半分の値の左マージンと、親要素の左半分の位置（水平方向の中心）を設定することでツールチップの中心と親要素の中心を合わせます。

.tooltip {
	width: 120px;
	left: 50%; 
	margin-left: -60px;
}

チールチップの矢印もCSSで描画します。

.tooltip > .text::after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}

デモ

参考