Question

我在html5画布上放了一个图像。

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

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

$(".link1").hover(function () {
                $('#myDiv').show();
            }, function () {
                $('#myDiv').hide();
            });

div是：

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

现在，在鼠标悬停时，div出现在页面的末尾。我需要它出现在图像下方。我怎样才能做到这一点？

Answer 1

这取决于你的'myDiv'div的定位。

如果只是工具提示中的文字，则可以使用<img title="my tooltip text" />。

Answer 2

您可以使用事件对象中的pageX，pageY将div放在图像下方。

请尝试使用此链接获取解决方案http://jsfiddle.net/ZpGS3/14/。

Answer 3

您可以尝试一个名为TipTip的jQuery插件：

http://code.drewwilson.com/entry/tiptip-jquery-plugin

你会发现它很容易使用，设计非常棒:)。

您可以转到该链接，尝试看看您是否喜欢。

考虑到您的示例，为了显示TipTip的工具提示，您只需执行以下操作：

包括TipTip的CSS和JS文件参考
放一些JS：$("#img1").tipTip();
将工具提示的内容放在图片的title选项中：

例如：<img id="img1" title="<p>Hello</p>"/>

Answer 4

要在鼠标悬停时应用工具提示，您应该使用

$('#img1').mouseover(function(){
$(this).attr('title','MY Image Title');
});

在鼠标悬停上应用工具提示

4 个答案: