.has_tooltip {
	position: relative;
	display: block; /* attempt to fix crap Safari on Mac, which ignores :hover */
}

/* Tooltip text */
.has_tooltip > .tooltiptext {
  	position: absolute;
	display: inline-block;
  z-i_ndex: 1;

  visibility: hidden;

  w_idth: auto;
	h_eight:auto;	
  background-color: rgba(255,255,255,.9);
  color: black;
	line-height: normal;

  text-align: center;
  padding: .5rem;
  border-radius: 1rem 1rem 0 0;
	bottom:0;
	left:50%;

	transform: translate(-50%, 100% );
	transition: transform 1s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.has_tooltip:hover > .tooltiptext {
  visibility: visible;
	transform: translate(-50%, 0 );
}

.has_tooltip:hover > .tooltiptext:empty {
	display: none;
}


.has_tooltip:hover {
	top:0;
}