 <p>You could use a <code>pseudo element</code> to achieve this sort of functionality. Since the </p> <blockquote> <p>pseudo elements cannot be placed directly onto an input tag</p> </blockquote> <p>, i've wrapped the input in a div and placed the pseudo on it instead: </p> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div { display: inline-block; } .cp3 input { width: 50px; } input { padding: 10px; height: 30px; } .cp4 { position: relative; transition: all 0.8s; } .cp4:hover:before { content: ""; position: absolute; right: 5%; height: 30px; width: 30px; background: url(http://cdn.flaticon.com/png/256/64494.png); background-size: 30px 30px; top: 10px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt; &lt;div class="label"&gt;Postal Code&lt;/div&gt; &lt;div class="cp4"&gt; &lt;input type="text" /&gt; &lt;/div&gt; &lt;div class="cp3"&gt; &lt;input type="text" /&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <hr> <h1>You want a tooltip?</h1> <hr> <p>Using an absolutely positioned element, you can then use the <a href="http://css-tricks.com/child-and-sibling-selectors/" rel="nofollow"><code>~</code> (sibling selector)</a> to show a tooltip as well when you hover the icon.</p> <p>To get any sort of 'fade in' using css, I've applied the <code>opacity:0 --&gt; opacity:1</code> with a nice transition. This can be shown in the below example:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.myInput { position: relative; display: inline-block; height: 30px; width: 200px; background: gray; transition: all 0.8s; } .myInput div, input { position: absolute; display: inline-block; } input { height: 30px; width: 200px; } .tooltip { transition: all 0.8s; opacity: 0; height: 30px; width: 30px; position: absolute; background: url(http://cdn.flaticon.com/png/256/64494.png); background-size: 30px 30px; right: 0; top:5%; } .myInput:hover .tooltip{ opacity:1; } .tooltip:hover ~.msg{ opacity:1; } .msg{ transition: all 0.8s; top:35px; left:100px; opacity:0; } .toRight{ top:0; left:220px; width:300px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>Hover the textbox, then the icon &lt;br/&gt; &lt;hr/&gt; &lt;br/&gt; &lt;div class="myInput"&gt; &lt;input type="text" placeholder="text here" /&gt; &lt;div class="tooltip"&gt;&lt;/div&gt; &lt;div class="msg"&gt;message here&lt;/div&gt; &lt;div class="msg toRight"&gt;Or even here&lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>