.hover-spot {
    position: absolute;
    border: yellowgreen 1px solid;
    cursor: pointer;
    z-index:100;

  }

  .info-box-empty, .info-box {
    top: 50%;
    left: 100%;
    transform: translate(20px, -50%);
    padding: 5px;
    display: none;
    width:max-content;
  }

  .info-box {
    border: 1px solid yellowgreen;
    background-color:black;
    z-index:101;
  }

  .hover-spot:hover .info-box,   .hover-spot:hover .info-box-empty {
    display: block;
  }




.ttharper {

padding: .25em;
background: #ffc3f3;
font-family: monospace;
color: rgb(0, 0, 0);
text-shadow: ;
margin: 1px;
display: inline-block;
font-size:10px;



}

.ttfayraz {

padding: .25em;
background: #b3e68f;
font-family: monospace;
color: rgb(0, 0, 0);
text-shadow: ;
margin: 1px;
display: inline-block;
font-size:10px;



}

.ttisa {

padding: .25em;
background: #000000;
font-family: monospace;
color: rgb(255, 0, 0);
text-shadow: 0px 5px 7px #ff0000;
margin: 1px;
display: inline-block;
font-size:10px;


}

.tttec {

padding: .25em;
background: #0984ff;
font-family: monospace;
color: white;
text-shadow: 0px 0px 10px #ffffff;
margin: 1px;
display: inline-block;
font-size:10px;


}

.ttclaire {

padding: .25em;
background-image: url(https://clipart-library.com/img1/1113642.gif);
color: rgb(255, 250, 149);
background-color: rgba(0, 0, 0, 0.486);
background-blend-mode: overlay;
font-family: "comic sans ms";
text-shadow: 0px 0px 10px #ffbd68;
margin: 1px;
display: inline-block;
font-size:9px;

}

.tttheros {

padding: .25em;
background: #000000;;
color: rgb(255, 255, 255);
font-family: monospace;
text-shadow: ;
margin: 1px;
display: inline-block;
font-size:10px;

}


.ttantipater {

padding: .25em;
background-image: url(https://i.pinimg.com/originals/7d/75/72/7d7572a9ebe9dbb714a110d92dec44b7.gif);
background-color: rgba(0, 0, 0, 0.486);
background-blend-mode: overlay;

font-family: "Jazz LET", "fantasy";
color: rgb(255, 255, 255);
text-shadow: 0px 0px 10px rgb(255, 219, 77);;
margin: 1px;
display: inline-block;
font-size:10px;

}


/* copy paste

<div class="tooltip">  main text
<div class="tooltiptext">
   <br><div class="ttharper"><img src="https://i.imgur.com/g4BZXnN.png"><a href="https://specgens.neocities.org/harper"style="color:#000"><b>HARPER: </b></a>TESSSTESTETSE</div>
   <br><div class="ttfayraz"><img src="https://i.imgur.com/ZuwINJj.png"><a href="https://specgens.neocities.org/fayraz"style="color:#000"><b>FAYRAZ: </b></a>TESSSTESTETSE</div>
   <br><div class="ttisa"><img src="https://i.imgur.com/Erg5V07.png"><a href="https://specgens.neocities.org/isa"style="color:red"><b>ISA: </b></a>TESSSTESTETSE</div>
   <br><div class="tttec"><img src="https://i.imgur.com/TNlRooe.png"><a href="https://specgens.neocities.org/tec"style="color:#ffffff"><b>TEC: </b></a>SPECIAL GENERALISTSSPECIAL GENERALISTSSPECIAL GENERALISTSSPECIAL GENERALISTS</div>
   <br><div class="ttclaire"><img src="https://i.imgur.com/Tf98AZ7.png"><a href="https://specgens.neocities.org/claire" style="color:rgb(255, 250, 149);"><b>CLAIRE: </b></a>TESSSTESTETSE</div>
   <br><div class="tttheros"><img src="https://i.imgur.com/PWcsZwt.png"><a href="https://specgens.neocities.org/theros" style="color:#ffffff"><b>THEROS: </b></a>TESSSTESTETSE</div>
   <br><div class="ttantipater"><img src="https://i.imgur.com/SDuQgEa.png"><a href="https://specgens.neocities.org/antipater" style="color:#ffffff"><b>ANTIPATER: </b></a>TESSSTESTETSE</div>
</div>
</div> 

*/