I need help creating text hints for input fields when they are focused. You can check out my progress here: http://jsfiddle.net/krpkm5dc/. I initially struggled with setting the max-width for an absolutely positioned element, but I discovered that using display: table solved the issue.
<div class="wrapper">
<input type="text">
<div class="hint">
Lorem ipsum
</div>
</div>
.wrapper {
position: relative;
display: inline-block;
}
.hint {
color: white;
background: #333;
position: absolute;
top: 0;
left: 100%;
display: none;
max-width: 200px;
}
input:focus ~ .hint {
display: table;
}
However, I encountered another challenge when trying to adjust the positioning of the hint to the right side.
.hint {
right: 100%;
}
If you take a look at this example here: http://jsfiddle.net/6vxye8q5/, you'll see that the right side doesn't align properly with the left side of the input field. Can anyone explain why this is happening?