Can’t seem to make it happen for some reason. Either .ToolTip just appears ( instead of a gentle dropdown ), or .ToolTipText won’t appear and .ToolTip have a weird transition ( Like opening/closing from the middle ) – https://jsfiddle.net/Apryed/40exvq6s/2/ .

I combined them this way:

<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 tried a few modifications in css and in DOM style with JavaScript, that I can’t recall them since they were fails ( visibility and z-index most of the time ) .

I was expecting to combine this two things just with HTML5, CSS3 and JavaScript (ES6 Tops) – https://jsfiddle.net/Apryed/gnuebymf/ :

1. A clickable drop down
2. A Tool tip with descriptive information

To hide a few things from showing and to describe what should be inserted inside.

Notice how the Drop down gently reveals and hides in comparison to the other fiddle.