CSS error tool tips not working properly - html

Question

I got my general CSS code for the tool tips from here, but tried tailoring it to my needs:
/* The tooltip stuff */
.tooltip
{
top: -5px;
z-index: 1;
display: inline-block;
width: 200px;
background-color: #e55;
padding: 5px 0;
position: absolute;
color: #fff;
border-radius: 6px;
margin-left: 6px;
}
.tooltip::after
{
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #e55 transparent transparent;
}
For some reason, however, when I test this with a dummy tool tip, it not only is missing its arrow, but it isn't even on the row that needs it! Even worse, the tool tips, for some reason, sit on top each other!
The HTML code to the main div is as follows:
<div class="main pageCenter">
<form id="newUserRegistration">
<span class="row">
<label for="firstName" class="half">First name</label>
<input type="text" id="firstName" class="half">
<span class="tooltip">text</span>
</input>
</span>
<span class="rowTight">
<label for="lastName" class="half">Last name</label>
<input type="text" id="lastName" class="half">
<span class="hidden tooltip"></span>
</input>
</span>
<span class="rowTight">
<label for="empIDNumber" class="half">Employee ID number</label>
<input type="text" class="number" class="half">
<span class="tooltip">other text</span>
</input>
</span>
<span class="rowTight">
<label for="dept" class="half">Department</label>
<select id="dept" class="half">
<!-- To be populated with data from a Mustache template-->
{{#departments}}
<option id="{{departmentHTMLID}}">{{departmentName}}</option>
{{/departments}}
</select>
<span class="hidden tooltip"></span>
</span>
<span class="rowTight">
<label for="manager" class="half">Manager name</label>
<input type="text" id="manager" class="half">
<span class="hidden tooltip"></span>
</input>
</span>
<span class="rowTight">
<label for="username" class="half">Username</label>
<input type="text" id="username" class="half">
<span class="hidden tooltip"></span>
</input>
</span>
<span class="rowTight">
<label for="password" class="half">Password</label>
<input type="text" id="password" class="half">
<span class="hidden tooltip"></span>
</input>
</span>
<span class="rowTight">
<label for="confirmPassword" class="half">Confirm password</label>
<input type="text" id="confirmPassword" class="half">
<span class="hidden tooltip"></span>
</input>
</span>
<span class="rowTight">
<label for="email" class="half" title="A confirmation email will be sent to this e-mail address.">E-mail address</label>
<input type="email" class="half" title="A confirmation email will be sent to this e-mail address.">
<span class="hidden tooltip"></span>
</input>
</span>
<span class="right row buttonRow">
<input type="reset" class="right" value="Clear"/>
<input type="submit" class="right" value="Submit" />
</span>
</form>
</div>
and the rest of my CSS code is as follows:
/* Fractional-width classes */
.fiveSixths { width: 83.3333333333333333%; }
.fourFifths { width: 80%; }
.threeFourths { width: 75%; }
.twoThirds { width: 66.6666666666666667%; }
.threeFifths { width: 60%; }
.half { width: 50%; }
.twoFifths { width: 40%; }
.third { width: 33.3333333333333333%; }
.fourth { width: 25%;}
.fifth { width: 20%; }
.sixth { width: 16.6666666666666667%; }
.main
{
border: 2px solid orange;
border-radius: 5px;
box-shadow: 0px 0px 100px orange;
}
.main > *
{
padding: 10px;
}
.pageCenter
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="text"],input[type="password"], input[type="email"]
{
border-left-style: none !important;
border-right-style: none !important;
border-top-style: none !important;
border-bottom-color: #888 !important;
}
input[type="submit"],input[type="reset"],button
{
height: 25px;
width: 100px;
border-width: 1px;
border-radius: 3px;
}
input[type="submit"]
{
background-color: orange;
border-color: orange;
}
input[type="submit"]:hover
{
background-color: #fb0;
}
.hidden
{
display: none;
visibility: hidden;
}
.row:not(.buttonRow),.rowTight:not(.buttonRow)
{
display: block;
width: 100%;
}
.row
{
margin-top: 10px;
margin-bottom: 10px;
}
.rowTight
{
margin-top: 5px;
margin-bottom: 5px;
}
.right
{
float: right;
}
.number
{
text-align: right;
}
.main
{
min-width: 450px;
width: 50%;
}
#formContainer
{
padding: 20px;
}
#newUserRegistration > *:not(input[type="submit"])
{
width: 100%;
overflow: hidden;
}
#newUserRegistration > * > *
{
float: left;
}
#newUserRegistration > * > *:not(:first-child):not([type="submit"]):not([type="reset"]):not(button)
{
margin-left: -4px;
}
#newUserRegistration span
{
overflow: auto;
}
I've been trying to play with this for a while, but couldn't get the tool tips to position properly, nor for them to not be on top each other.

Answer 1

Although position: relative was declared on your containing elements, the overflow: auto property declared in addition prevented any overflow of the element's contents being visible, and so the tooltip could not be properly observed because of this.
To address this:
Remove the float: left rules declared on nested elements by the
following rule: #newUserRegistration > * > * - the global
selectors (*) for this rule causes havoc in this case, and should
be avoided, for better practice use more specific selectors and
only style what you are required to.
Only float your form fields right, with more specific selectors,
e.g:
#newUserRegistration select, #newUserRegistration input {
float: right;
}
You are no longer required to clear floats using overflow: auto on
the containing parent element, allowing your absolutely positioned
tooltips to remain visible. In addition, a left positioning property has been added to your tooltips.
Updated JSFiddle
Code Snippet Demonstration:
/* The tooltip stuff */
.tooltip
{
top: -5px;
left: 100%; /* Added - position absolute tooltip relative to parent row */
z-index: 1;
display: inline-block;
width: 200px;
background-color: #e55;
padding: 5px 0;
position: absolute;
color: #fff;
border-radius: 6px;
margin-left: 6px;
}
.tooltip::after
{
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #e55 transparent transparent;
}
/* Fractional-width classes */
.fiveSixths { width: 83.3333333333333333%; }
.fourFifths { width: 80%; }
.threeFourths { width: 75%; }
.twoThirds { width: 66.6666666666666667%; }
.threeFifths { width: 60%; }
.half { width: 50%; }
.twoFifths { width: 40%; }
.third { width: 33.3333333333333333%; }
.fourth { width: 25%;}
.fifth { width: 20%; }
.sixth { width: 16.6666666666666667%; }
.main
{
border: 2px solid orange;
border-radius: 5px;
box-shadow: 0px 0px 100px orange;
}
.main > *
{
padding: 10px;
}
.pageCenter
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="text"],input[type="password"], input[type="email"]
{
border-left-style: none !important;
border-right-style: none !important;
border-top-style: none !important;
border-bottom-color: #888 !important;
}
input[type="submit"],input[type="reset"],button
{
height: 25px;
width: 100px;
border-width: 1px;
border-radius: 3px;
}
input[type="submit"]
{
background-color: orange;
border-color: orange;
}
input[type="submit"]:hover
{
background-color: #fb0;
}
.hidden
{
display: none;
visibility: hidden;
}
.row:not(.buttonRow),.rowTight:not(.buttonRow)
{
display: block;
position: relative;
width: 100%;
}
.row
{
margin-top: 10px;
margin-bottom: 10px;
}
.rowTight
{
margin-top: 5px;
margin-bottom: 5px;
}
.right
{
float: right;
}
.number
{
text-align: right;
}
.main
{
min-width: 450px;
width: 50%;
}
#formContainer
{
padding: 20px;
}
#newUserRegistration > *:not(input[type="submit"])
{
width: 100%;
overflow: hidden;
}
#newUserRegistration > * > * /* this is causing mayhem, selectors should be more specific */
{
float: left;
}
/* ...like this */
#newUserRegistration select, #newUserRegistration input {
float: right;
}
#newUserRegistration label {
float: none;
}
#newUserRegistration > * > *:not(:first-child):not([type="submit"]):not([type="reset"]):not(button)
{
margin-left: -4px;
}
/* not necessary, since you no longer need to clear nested elements that are floated
#newUserRegistration span
{
overflow: auto;
} */
<div class="main pageCenter">
<form id="newUserRegistration">
<span class="row">
<label for="firstName" class="half">First name</label>
<input type="text" id="firstName" class="half" />
<span class="tooltip">text</span>
</span>
<span class="rowTight">
<label for="lastName" class="half">Last name</label>
<input type="text" id="lastName" class="half" />
<span class="hidden tooltip"></span>
</span>
<span class="rowTight">
<label for="empIDNumber" class="half">Employee ID number</label>
<input type="text" class="number half" />
<span class="tooltip">other text</span>
</span>
<span class="rowTight">
<label for="dept" class="half">Department</label>
<select id="dept" class="half">
<!-- To be populated with data from a Mustache template-->
{{#departments}}
<option id="{{departmentHTMLID}}">{{departmentName}}</option>
{{/departments}}
</select>
<span class="hidden tooltip"></span>
</span>
<span class="rowTight">
<label for="manager" class="half">Manager name</label>
<input type="text" id="manager" class="half" />
<span class="hidden tooltip"></span>
</span>
<span class="rowTight">
<label for="username" class="half">Username</label>
<input type="text" id="username" class="half" />
<span class="hidden tooltip"></span>
</span>
<span class="rowTight">
<label for="password" class="half">Password</label>
<input type="text" id="password" class="half" />
<span class="hidden tooltip"></span>
</span>
<span class="rowTight">
<label for="confirmPassword" class="half">Confirm password</label>
<input type="text" id="confirmPassword" class="half" />
<span class="hidden tooltip"></span>
</span>
<span class="rowTight">
<label for="email" class="half" title="A confirmation email will be sent to this e-mail address.">E-mail address</label>
<input type="email" class="half" title="A confirmation email will be sent to this e-mail address." />
<span class="hidden tooltip"></span>
</span>
<span class="right row buttonRow">
<input type="submit" class="right" value="Submit" />
<input type="reset" class="right" value="Clear"/>
</span>
</form>
</div>