<style> .mouseover { background-color: #c00; color: white; display: inline-block; padding: 2px 25px; text-align: center; width:93%; cursor:pointer; } .mouseover:hover { background-color:#ff3800; color: #fff; } .focus { width: 99%; padding: 16px 20px; box-sizing: border-box; border: 2px solid #000; background-color:#008000; color: #fff; } .focus:focus { background-color:#777; color: #fff; outline: none; } @media screen and (max-width: 500px) { .focus, .mouseover { width:100%; margin:5px; } } p.tooltip { display: none; background-color: #c00; padding: 20px; color: #fff; cursor:pointer; } div.tooltip:hover p.tooltip { display: block; cursor:pointer; } </style> <div class="mouseover"> <p>Over Me</p> </div> </p> <input class="focus" name="fname" placeholder="Click Me" type="text"> <p style="clear:both;"></p> <br> <div class="tooltip"><b>mouse over me</b> <p class="tooltip">welcome to netbax.net</p> </div>