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

发布于 2025-01-05 22:02:30 字数 464 浏览 2 评论 0原文

我在图像上使用 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);
    }

});

原文

I am using jquery tools tooltips on an image. It's a basic use of the tooltip, when somebody rolls over the image, the background image dims and the tooltip pops up and says "click for details", and this works fine up to this point. I would like to actually have the tooltip be clickable so that it will open an overlay window with the details of the image. I'm not sure how to go about doing that? The html content is just a div with an .albumImage class and img src, pretty much straight out of the guide. My script is as follows...

$(".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);
    }

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初见终念 2025-01-12 22:02:30

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

$(".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);
    }
});

Simply add the click handler before setting up the tooltip:

$(".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);
    }
});

回复收藏 0 原文

情场扛把子 2025-01-12 22:02:30

考虑到当您将鼠标悬停在图像上时，您的 .tooltip() 可能会在页面中生成一些 DOM。假设 DOM 是

blah blah blah。

最后通过.tooltip()函数将点击事件附加到生成的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);
    } 

});

Considering the fact that your .tooltip() might be generating some DOM within a page when you hover an image. Lets say that DOM is <div id='tooltip'>blah blah blah</div>.

Finally attach the click event to the generated DOM by .tooltip() function.

$(".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);
    } 

});

回复收藏 0 原文

~没有更多了~