Edit in JSFiddle

<span class="tooltip2">Текст <span>Подсказка</span></span>

body {
	padding: 15px;
	font-family: Arial;
	font-size: 14px;
}

.tooltip2 {
	display: inline-block;
	position: relative;
	cursor: help;
}
.tooltip2 > span {
	position: absolute;
	top: 100%;
	left: -20em; /* = max-width */
	right: -20em; /* = max-width */
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;  /* ширина подсказки может быть не более содержимого */
	max-width: 20em;  /* ширина подсказки может быть не более 20em */
	max-height: 80vh; /* необязательное ограничение по высоте подсказки, 1vh — это 1% от ширины окна */
	overflow: auto;
	visibility: hidden;
	margin: .4em auto 0;
	padding: .3em;
	border: solid rgb(200,200,200);
	font-size: 90%;
	background: #fff;
	line-height: normal;
	cursor: auto;
}
.tooltip2:after {
	/* треугольничек под подсказкой */
	content: "";
	position: absolute;
	bottom: -.4em;
	left: 50%;
	visibility: hidden;
	margin: 0 0 0 -.4em;
	border: .4em solid;
	border-color: transparent transparent rgb(200,200,200) transparent;
	cursor: auto;
}
.tooltip2:before {
	content: "";
	position: absolute;
	bottom: -.4em;
	left: 0;
	right: 0;
	height: .4em;
	visibility: hidden;
}
.tooltip2:hover > span, .tooltip2:hover:before, .tooltip2:hover:after,
.tooltip2:focus > span, .tooltip2:focus:before, .tooltip2:focus:after {
	visibility: visible;
	transition: 0s .4s;
}
.tooltip2:focus {
	outline: none;
}