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

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 from event 对象将div 放置在图像下方。

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

Answer 3

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

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

Answer 4

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

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

您会发现它非常易于使用，并且设计:)非常好。

您可以转到链接并尝试看看您是否喜欢它。

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

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

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