.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

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

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
/* ################################################ */

.nav_btn_tooltip {
    position: relative;
    display: inline-block;
	bottom:0px;
}

.nav_btn_tooltip .nav_btn_tooltiptext {
	visibility: hidden;
	width: 80px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 0px 6px 6px 0px;
	padding: 3px 0;
	position: absolute;
	z-index: 10;
	top: 4px; 
	left: 39px; 
	opacity: 1;
	transition: opacity 2s;
	font-size: 9px;
}

.nav_btn_tooltip:hover .nav_btn_tooltiptext {
    visibility: visible;
    opacity: 1;
	cursor:none;
}




/* ################################################ */

.btn_tooltip {
    position: relative;
    display: inline-block;
	bottom:0px;
}

.btn_tooltip .btn_tooltiptext {
	visibility: hidden;
	width: 80px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 3px 0;
	position: absolute;
	z-index: 10;
	top: 37px;
	left: -20px;
	margin-right: 60px;
	opacity: 1;
	transition: opacity 2s;
	font-size: 9px;
}

.btn_tooltip:hover .btn_tooltiptext {
    visibility: visible;
    opacity: 1;
	cursor:none;
}
.btn_tooltip:hover {
    bottom:8px;
	cursor:none;
}


/* ################################################ */

.btn_tooltip_small {
    position: relative;
    display: inline-block;
	bottom:0px;
}

.btn_tooltip_small .btn_tooltiptext {
	visibility: hidden;
	width: 80px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 3px 0;
	position: absolute;
	z-index: 10;
	top: 30px;
	left: -25px;
	margin-right: 60px;
	opacity: 1;
	transition: opacity 2s;
	font-size: 9px;
}

.btn_tooltip_small:hover .btn_tooltiptext {
    visibility: visible;
    opacity: 1;
	cursor:none;
}
.btn_tooltip_small:hover {
    bottom:8px;
	cursor:none;
}