HTML CSS examples for CSS Widget:Table Position
Absolute positioning of display:table element when focus in input text box
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .wrapper {<!-- ww w . j a va 2s .c o m--> position:relative; display:inline-block; } .hint { color:Chartreuse; background:yellow; position:absolute; top:0; right:100%; display:none; max-width:201px; } input:focus~.hint { display:block; } </style> </head> <body> <div class="wrapper"> <input type="text"> <div class="hint"> Lorem ipsum </div> </div> <br> <div class="wrapper"> <input type="text"> <div class="hint"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar </div> </div> </body> </html>