Всплывающая подсказка для инструментов jquery

Question

Я использую подсказки инструментов jquery на изображении. Это основное использование всплывающей подсказки, когда кто-то переворачивает изображение, фоновое изображение тускнеет, и всплывающая подсказка всплывает с надписью «нажмите для подробностей», и до этого момента это работало нормально. Я бы хотел, чтобы подсказка была кликабельной, чтобы она открывала окно наложения с деталями изображения. Я не уверен, как это сделать? Содержимое html - это просто div с классом .albumImage и img src, в значительной степени прямо из руководства. Мой сценарий выглядит следующим образом ...

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

Просто добавьте обработчик кликов перед настройкой всплывающей подсказки:

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

Answer 2

Учитывая тот факт, что ваш .tooltip() может генерировать некоторый DOM на странице при наведении курсора на изображение. Допустим, DOM <div id='tooltip'>blah blah blah</div>.

Наконец, прикрепите событие click к сгенерированному DOM с помощью функции .tooltip().

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

});