I am encountering some issues with getting the desired functionality. Either the .ToolTip just appears abruptly instead of smoothly dropping down, or the .ToolTipText does not show up and the .ToolTip has a strange transition (like opening/closing from the middle) - https://jsfiddle.net/Apryed/40exvq6s/2/.
The way I combined them is as follows:
<h3 class="ShowHide">Text to click and display/hide</h3>
<div class="ToolTip">
<div class="ToolTipText">Descriptive Text</div>
<div>
<label for="date">SaveDate:</label>
<input type="text" id="date" name="date" required minlength="17" maxlength="17" />
</div>
</div>
</div>
Note: I have made several attempts to modify CSS and DOM styles with JavaScript, but unfortunately, they were unsuccessful (mostly related to visibility and z-index).
My expectation was to combine these two elements using HTML5, CSS3, and JavaScript (ES6 Tops) - https://jsfiddle.net/Apryed/gnuebymf/:
- A clickable drop-down
- A tooltip with descriptive information
To control what should be displayed and provide guidance on input.
Observe how the drop-down gently reveals and hides compared to the other fiddle.
Edit: As requested by Bharata - I'm not entirely sure why, as I've seen posts similar to mine...but it's okay with me.
let ShHi = document.getElementsByClassName("ShowHide1")
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"
}
})
}/* DropDown Part */
.ShowHide1 {
padding: 0;
font-size: 1em;
transition: 0.3s;
cursor: pointer;
}
.ToolTip1 {
padding: 0 18px;
margin: 3px 0;
max-height: 0;
overflow: hidden;
transition: 0.3s ease-out;
}
/* ToolTip Part */
.ToolTip2 {
position: relative;
display: inline-block;
}
.ToolTip2 > :nth-child(2) {
background-color: lightgreen;
padding: 10px;
}
.ToolTip2 .ToolTipText2 {
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;
}
.ToolTip2 .ToolTipText2::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.ToolTip2:hover .ToolTipText2 {
opacity: 1;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
</head>
<body>
<h2>DropDown Part</h2>
<h3 class="ShowHide1"><u>Click Me!</u></h3>
<div class="ToolTip1">
<div>
<label for="x">Some randomtext</label>
<input id="x" name="x"/>
</div>
</div>
<hr>
<h2>ToolTip Part</h2>
<h3>No Need to Click Me!</h3>
<div class="ToolTip2">
<div class="ToolTipText2">
Text to display
</div>
<div>
<label for="x1">Hover over this green area</label>
<input id="x1" name="x1"/>
</div>
</div>
</body>
</html>