JSFiddle - React, Tailwind, and code Playground

by Apryed

HTML

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
    <h2>DropDown Part</h2>
		<h3 class="ShowHide"><u>Click Me!</u></h3>
		<div class="ToolTip">
      <div class="ToolTipText">
        Text to display
      </div>
      <div>
			  <label for="x1">Hover over this green area</label>
			  <input id="x1" name="x1"/>
      </div>
    </div>
	</body>
</html>

CSS

/* DropDown Part */
.ShowHide {
  padding: 0;
  font-size: 1em;
  transition: 0.3s;
}

.ToolTip {
  position: relative;
  display: inline-block;
  padding: 0 18px;
  margin: 3px 0;
  max-height: 0;
  overflow: hidden;
  transition: 0.3s ease-out;
}

/* ToolTip Part */

.ToolTip > :nth-child(2) {
  background-color: lightgreen;
  padding: 10px;
}

.ToolTip .ToolTipText {
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
  -webkit-transform: translateY(calc(-5px - 100%));
  transform: translateY(calc(-5px - 100%));
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}

.ToolTip .ToolTipText::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.ToolTip:hover .ToolTipText {
  opacity: 1;
}

JavaScript

let ShHi = document.getElementsByClassName("ShowHide")
for (let i = 0; i < ShHi.length; i++) {
  ShHi[i].addEventListener("click", function () {
    this.classList.toggle("show")
    let nextEl = this.nextElementSibling
    nextEl.classList.toggle("active")
    if (nextEl.style.maxHeight) {
      nextEl.style.maxHeight = null
    } else {
      nextEl.style.maxHeight = nextEl.scrollHeight + "px"
    }
  })
}