Tooltip on the right side of the input - html

Question

I coded this simple CSS-trick to show when you click on the input (:focus) a tooltip will give you some information about the input. Everything is working but, the tooltip it's displayed below the input and not over. Actually I know that I can use margin to fix it, but I'm asking if there's a "more" clean way that when you use position absolute in this way, it will automatically align the tooltip over the input.
HTML:
<div>
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div>
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>
CSS
.input_info {
display: none;
position: absolute;
background: #000;
border: 1px solid #fff;
color: #fff;
width: 100px;
margin-left: 80px;
}
input[type="text"]:focus + .input_info {
display: block;
}
https://jsfiddle.net/xzqsaobu/

Answer 1

You need to change display: block to display: inline-block, remove the margin-left and position: absolute;.
Your fiddle updated.
Snippet:
.input_info {
background: #000;
border: 1px solid #fff;
color: #fff;
width: 100px;
display: none;
}
input[type="text"]:focus + .input_info {
display: inline-block;
}
<div>
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div>
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>

Answer 2

Here is how to do it with position: absolute and relative.
On the container, set position: relative, and display: table (shrink to fit).
For the position: absolute tooltip, set top: 0, and left: 100% (moves to the right edge of the relative container).
You can also horizonally center the fields in a page with this approach.
jsFiddle
.fieldset {
position: relative;
display: table;
/* margin: auto; */
}
.input_info {
position: absolute;
left: 100%;
top: 0;
background: #000;
border: 1px solid #fff;
color: #fff;
width: 100px;
display: none;
}
input[type="text"]:focus + .input_info {
display: block;
}
<div class="fieldset">
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div class="fieldset">
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>