html code
  <div id="tool" data-tool='Привет!'>Наведи на меня</div>

css code
#tool{
	cursor: help;
	position: relative;
}

#tool::before,
#tool::after {
	left: 50%;
	opacity: 0;
	position: absolute;
	z-index: -1;
}

#tool:hover::before,
#tool:focus::before,
#tool:hover::after,
#tool:focus::after {
	opacity: 1;
	z-index: 1;
}

#tool::before {
	border-style: solid;
	border-width: 1em;
	border-color: #2c86b3 transparent transparent transparent;
	bottom: 100%;
	content: "";
	margin-left: -2em;
	top: -2em;
	transition: opacity 1s ease, top .5s ease;
}

#tool:hover::before,
#tool:focus::before {
	top: -1em;
}
#tool::after { /*действия при наведении*/
	  background: #2c86b3;
    bottom: 170%;
    color: white;
    content: attr(data-tool);  /*выводит текст из html*/
    margin-left: -8.75em;
    padding: 1em;
    width: 14em;
    transition: opacity 0.6s ease;
}