Демо tooltip

HTML код:

<div class="example-item" data-tooltip="Аудиозвонок">Аудио</div>
<div class="example-item" data-tooltip="Видеозвонок">Видео</div>

CSS код:

.item { /* кнопки */
	background: aqua;
	border-radius: 5px;
	color: #555;
	display: inline-block;
	position: relative;
	padding: 2px 8px 4px;
}

.item::before { /* тело подсказки */
	content: attr(data-tooltip);
	position: absolute;
	top: 140%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	padding: 4px 6px;
	border-radius: 3px;
	background: #333;
	color: #eee;
	white-space: nowrap;
	z-index: 9999;
	display: none;
}
.item::after { /* треугольник */
	content: '';
	position: absolute;
	top: 85%;
	left: 0;
	right: 0;
	margin: 0 auto;
	border: 10px solid transparent;
	border-bottom: 10px solid #333;
	width: 15px;
	z-index: 9990;
	display: none;
}
.item:hover::before,
.item:hover::after {
	display: block;
}