JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:relative;">    
    <div class="item_btn_1"></div>
    <span class="titulo_btn_1" href="#">Texto ToolTip...</span>
</div>

CSS

/* Boton */
.item_btn_1{
	background-color: #C5D163;
	background-image: url(../images/unidad_1.png);
	background-repeat: no-repeat;
	background-position: center center;
	width: 80px;
	height: 80px;
	position: absolute;
	opacity: 100;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
	border-radius: 100px;
	}

.item_btn_1 a{
	position: absolute;
	text-decoration: none;
	}

.item_btn_1:hover {
	background-color: #D5DE8D;
}
/* Fin Boton */





/* Rollover del boton */
.titulo_btn_1{
	font-family: Arial;
	color: #000;
	background-color: #C5D163;
	width: 150px;
	position: absolute;
	z-index: -9999;
	opacity: 0;
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
	text-align: center;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
	border-radius: 100px;
	-webkit-transition: all 0s;
	-moz-transition: all 0s;
	-o-transition: all 0s;
	-ms-transition: all 0s;
	transition: all 0s;
	float: left;
	margin-top: 25px;
	margin-left: 85px;
	}
/* Fin Rollover del boton */




/* Opacidad para el hover */
.item_btn_1:hover + .titulo_btn_1 {
	opacity: 0.8;
    -webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;
}
/* Fin Opacidad para el hover */

/* Posicion para el boton */
.titulo_btn_1{
    left:0px;
    cursor:default;
}
/* Fin Posicion para el boton */