JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
	  <td>
        <div class="infobox">
          Artikel11
          <p>
	        <strong>Beschreibung11</strong><br>
            Das ist ein Superding<br>
            Preis 5 Lira
          </p>
        </div>
	  </td>	
	  <td>
        <div class="infobox">
          Artikel12
          <p>
	        <strong>Beschreibung12</strong><br>
            Das ist Käse<br>
            Preis 50 Pfund
          </p>
        </div>
	  </td>	
	  <td>
        <div class="infobox">
          Artikel13
          <p>
	        <strong>Beschreibung13</strong><br>
            Das ist toll<br>
            Preis 54 Piaster
          </p>
        </div>
	  </td>	
	</tr>  
    <tr>
	  <td>
        <div class="infobox">
          Artikel21
          <p>
	        <strong>Beschreibung21</strong><br>
            awert erztr<br>
            uzutrrtrr
          </p>
        </div>
	  </td>	
	  <td>
        <div class="infobox">
          Artikel22
          <p>
	        <strong>Beschreibung22</strong><br>
            Terrakalt<br>
            gebraucht<br>
			wie neu<br>
			fast geschenkt
          </p>
        </div>
	  </td>	
	  <td>
        <div class="infobox">
          Artikel23
          <p>
	        <strong>Beschreibung23</strong><br>
            Sonderangebot<br>
            Preis 12$
          </p>
        </div>
	  </td>	
	</tr>  
  </table>

CSS

div.infobox {
    color: blue;
    display: inline;
}

div.infobox:hover {
    background-color: white;
}

div.infobox p {
    text-align: justify;
         /*   min-width: 20em;     */
    visibility: hidden;
    position: absolute;
    margin-top: -0.2em;
    padding: 0.5em;
    text-decoration: none;
    margin-left: 1em;
    border: 3px solid #c30;
    border-color: #dbdbdb #656565 #656565 #dbdbdb;
    color: black;
    background-color: #e0e0e0;
}

div.infobox:hover p {
    visibility: visible;
}

tr {
    line-height: 2.0;
}