/* Tooltip container */
.tooltip {
  	position: relative;
  	display: inline-block;
  	/* If you want dots under the hoverable text */
  	/*border-bottom: 1px dotted black; */
}

/* Tooltip text */
.tooltip .tooltiptext {
  	visibility: hidden;
  	width: 200px;
  	background-color: #aaaaaa;
  	color: #ffffff;
  	text-align: left;
  	padding: 0 10px 0 0;
  	border-radius: 6px;

  	/* Position the tooltip text */
  	position: absolute;
  	z-index: 1;
  	bottom: 125%;
  	left: 30%;
  	margin-left: -30px;

  	/* Fade in tooltip */
  	opacity: 0;
  	transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  	content: "";
  	position: absolute;
  	top: 100%;
  	left: 30%;
  	margin-left: -5px;
  	border-width: 5px;
  	border-style: solid;
  	border-color: #aaaaaa transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  	visibility: visible;
  	/* opacity tooltip background */
  	opacity: 0.9;
}