JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<div id="A" class="formzeile">

              <div class="formicons">
                <div class="infocon">
                  <img class="handcursor" src="https://quickbooksonline.intuit.com/qbo/sui_opt_test/images/tooltip_icon.gif" titel="Info" alt="Info-Icon. Für Hilfe fahren Sie mit der Maus über dieses Icon"/>
                  <div id="B" class="tooltip">
                    <img src="https://www.nrsweb.com/shop/assets/images/tooltip_icon.gif" alt="Grafik:Tooltip-Spitze" />
                    <div>
                    Hinweistext
                    </div>
                  </div>
                </div>
              </div>
            </div>
</div>

CSS

#homeform .tooltip {
    top:-20px;
}

.tooltip {
    display:none;
    left:15px;
    position:absolute;
    z-index:500;
}
/*
#homeform .formzeile {
    float:left;
    margin-top:17px;
}

#A {
    display:none;
    z-index:10;
}*/

JavaScript

$( ".infocon" ).hover
        (
          function()
          {
              jQuery(this).find(".tooltip").slideDown(200);
          },
          function()
          { 
              jQuery(this).find(".tooltip").hide();
          }
        );