3

我将图像放在 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 出现在页面末尾。我需要它出现在图像的正下方。我怎样才能做到这一点？

4

4 回答 4

4

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

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

于 2012-09-19T06:44:56.510 回答
2

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

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

于 2012-09-19T06:56:06.300 回答
1

您可以尝试一个名为 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>"/>

于 2012-09-19T06:46:32.813 回答
1

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

$('#img1').mouseover(function(){
$(this).attr('title','MY Image Title');
});
于 2012-09-19T06:52:05.223 回答