style.css

html {
	min-height: 100%;
	background-image: url('./wp3867048-ukraine-flag-wallpapers.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

div{
	background: rgba(0, 0, 0, 0.3);
	color: white;
	width: 100%;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	font-size: 1.5em;
}

span{
	color: lime;
}

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

/*
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  margin-left: 0px;
  border-width: 10px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  transform: translate(-100%, calc(-50% + 5px)) rotate(90deg);
}
*/

.tooltip .tooltiptext ::after {
  content: 'right';
  top: 0;
  right: 0;
  transform: translateX(calc(100% + 10px));
}

.tooltip .tooltiptext::before {
  top: 50%;
  right: 0;
  transform: translate(calc(100% + 5px), -50%) rotate(45deg);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.bottom {
	vertical-align: middle;
	text-align: center;
    position: fixed;
    bottom: 0;
    right: 0;
}

.top {
	vertical-align: middle;
	text-align: center;
    position: fixed;
    top: 0;
    right: 0;
}