Question

我在图像上使用jquery工具提示。这是工具提示的基本用法，当有人翻阅图像时，背景图像变暗，工具提示弹出并显示“点击查看详细信息”，这一点工作正常。我想让工具提示可以点击，这样它就会打开一个带有图像细节的叠加窗口。我不知道该怎么做呢？ html内容只是一个带有.albumImage类和img src的div，非常直接来自指南。我的脚本如下......

$(".albumImage img[title]").tooltip({

    position: 'top center',
    offset: [80,0],

    onShow: function() {
    this.getTrigger().fadeTo("0", 0.3);
    },
    onHide: function() {
    this.getTrigger().fadeTo("0", 1.0);
    }

});

Answer 1

考虑到当您悬停图片时，.tooltip()可能会在页面中生成某些DOM。可以说DOM是<div id='tooltip'>blah blah blah</div>。

最后通过.tooltip()函数将click事件附加到生成的DOM。

$(".albumImage img[title]").tooltip({

    position: 'top center',
    offset: [80,0],

    onShow: function() {
        this.getTrigger().fadeTo("0", 0.3);
        $('#tooltip').click(function () {
            //Write your code to open up a lightbox showing 
            //the respective image and its details.
        });
    },
    onHide: function() {
        this.getTrigger().fadeTo("0", 1.0);
    } 

});

Answer 2

只需在设置工具提示之前添加点击处理程序：

$(".albumImage img[title]").click(function(){
    alert('Hello!');
});


$(".albumImage img[title]").tooltip({
    position: 'top center',
    offset: [80,0],
    onShow: function() {
        this.getTrigger().fadeTo("0", 0.3);
    },
    onHide: function() {
        this.getTrigger().fadeTo("0", 1.0);
    }
});

带嵌入式onclick的jquery工具工具提示

2 个答案: