JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

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

              <div class="formicons">
                <div class="infocon">
                  <img class="handcursor" src="img/i_icon.png" titel="Info" alt="Info-Icon. Für Hilfe fahren Sie mit der Maus über dieses Icon"/>
                  <div id="B" class="tooltip">
                    <img src="img/tooltippfeil.png" alt="Grafik:Tooltip-Spitze" />
                    <div>
                    Hinweistext
                    </div>
                  </div>
                </div>
              </div>
            </div>
</div>

CSS

//Betreffendes 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

//A einblenden
$( "#A" ).show();

//Tooltip Hover Funktion
$(".infocon").hover(
  function () {
    $(this).find(".tooltip").slideDown(200);
  }, 
  function () {
    $(this).find(".tooltip").hide();
  }
);