Applying tooltip on mouse hover
<p>I'm putting an image on html5 canvas.</p>

<pre><code>myString = '&lt;img id="img1" class="link1" src = 'img/icon1.png'&gt;&lt;/img&gt;';
            $('#main1' ).append(myString);
            $('#main1' + '-link1').fadeIn('slow'); 

            $(".link1").click(function () {
                window.location.href = url1;
            });

$(".link1").hover(function () {
                $('#myDiv').show();
            }, function () {
                $('#myDiv').hide();
            });
</code></pre>

<p>The div is :</p>

<pre><code>&lt;div id="myDiv" style="display:none;border: 1px solid black;width: 10px;height:5px;padding: 1px;"&gt;
    &lt;p&gt;Hello&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>Now, on mouse hover the div appears at end of the page. I need it to appear just below the image. How can I achieve that?</p>
