Question

我正在尝试创建一个显示图片而不是文字的悬停工具提示，这是我的代码：

$(document).ready(function () {
    $(".tips").tooltip({
        content: function () {
            return '<img src="' + $(this).attr("href") + '" />'
        }
    });
});

对于这个Html

<a href="http://materialmix.com/uploads/5e9667aa-3537-4c41-8d01-520447285b76_r.jpg" class="tips">
                                            <img src="http://plastic.jasonscms.com//images/camera.png">
                                        </a>

我创建了一个小提琴：http://jsfiddle.net/W3B9H/

谁能看到我做错了什么？它现在什么都不做，并且没有错误。

Answer 1

你只需要添加＆＃34; title＆＃34;对元素赋予一些任意值的属性，以使工具提示有效。

<a title="default tooltip" href="http://materialmix.com/uploads/5e9667aa-3537-4c41-8d01-520447285b76_r.jpg" class="tips">
    <img src="http://plastic.jasonscms.com//images/camera.png" />
</a>

Answer 2

您需要指定items参数，因为您没有使用默认的title属性。请参阅tooltip items。

现在，您需要调整内容函数以找到父锚：

$(".tips").tooltip({
    items: "img",
    content: function () {
        var element = $(this);
        var src = element.parent("a.tips").attr("href");
        console.log(src);
        return '<img src="' + src + '" class="tooltip-img" />'
    }
});

<style>
    .tooltip-img { height: 25px; width: 30px; }
</style>

这是一个更新的jsFiddle。

遇到Jquery UI工具提示有问题 - 图像

2 个答案: