Expand Tool-Tip to reveal more content
<p>I have an icon with a box above it with the words Hello. When you hover over the icon or the box I want it to expand and reveal text that is hidden (World on Hot Fiya!), much like a read more/read less function. The problem I'm having is, when the box reveals it covers the icon because it reveals down. I'm wondering what I can do so the icon stays put and the box reveals the text going up.</p>

<p>Here's the code I'm using:</p>

<pre><code>&lt;div class="icon"&gt;&lt;img src="icon.jpg"&gt;&lt;/div&gt;
&lt;div class="box"&gt;
  Hello
  &lt;p&gt;World on Hot Fiya&lt;/p&gt;
&lt;/div&gt;

$('.box p').addClass('is-hidden');

$('.box').hover(function() {
  $('.box p').removeClass('is-hidden').addClass('block');
}, function() {
  $('.box p').removeClass('block').addClass('is-hidden');
});
</code></pre>
