Как запустить Lightbox(Fancybox) из всплывающей подсказки (tooltipsy)?

Приложение, над которым я сейчас работаю, требует от пользователя навести курсор на значок, который запускает всплывающую подсказку, по которой пользователь может щелкнуть ссылку внутри, чтобы запустить fancybox с соответствующим продуктом. Я сталкиваюсь с проблемой всплывающей подсказки, не запускающей fancybox.

Вот код, который я сейчас использую. HTML:

<body class="body">
    <div class="main-container">
        <div class="column">
            <div class="anicontainer">
                <a id="p1tooltip" class="overlay" href="javascript:void(0)" >
                    <img src="icon.png"/>
                </a>
            </div>
        </div>
    </div>

CSS:

.main-container {
    position: absolute;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
    padding: 0;
    z-index: -1;
    height: 1080px;
    width: 1920px;
    background-image: url(../bk.png);
    background-size: 1920px 1080px;
    background-repeat: no-repeat;
    display: inline-table;
    border: 1px solid #C0C0C0;
    border-radius: 5px;
}
.anicontainer {
    z-index: 100;
    width: 1530px;
    height: 1080px;
    margin: 0 0 0 0;
    padding 0 0 0 0;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    display: table-cell;
    vertical-align: top;
}
.column {
    display: table-row;
    z-index: 100;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
    padding: 0;
}
#p1tooltip {
    top: 440px;
    left: 290px;
}
.overlay {
    display: table-cell;
    height: auto;
    width:auto;
    position:absolute;
    z-index: 5;
}

Первый код, который я попробовал JS:

$('#mst').tooltipster({
    animation: 'fade',
    delay: 100,
    trigger: 'hover',
    position: 'right',
    fixedWidth: 30,
    interactive: 'true',
    contentAsHTML: 'true',
    content: $('<p class="font tt">Title</p><hr><p class="tt font"><a id="p1" href="javascript:void(0)"><img src="icon.png"/></a>Product1</p>')
});

Второй код, который я попробовал JS:

$('#p1tooltip').tooltipster({
    animation: 'fade',
    delay: 100,
    trigger: 'hover',
    position: 'right',
    fixedWidth: 30,
    interactive: 'true',
    content: $('<p class="font tt">Title:</p><hr><p class="tt font"><a class="fancybox"  href="javascript:$.fancybox( {href : '
    product.html '} );"><img src="icon.png"/></a>Product1</p>')
});

JSFIDDLE

Источник

2 ответа

Ваша проблема в том, что ссылка Fancybox внутри параметра содержимого всплывающей подсказки не существует в DOM, когда триггер Fancybox инициализирует все.

Решением было бы установить для параметра содержимого всплывающей подсказки элемент, уже находящийся на странице (элемент div внутри скрытого элемента div должен работать нормально), или повторно инициализировать Fancybox в параметре обратного вызова functiontipster functionReady.

Javascript - это функциональный язык, вы можете просто передать новую функцию обратно через опции.

Пример:

$('#p1tooltip').tooltipster({
    functionReady: function () {
        $("a.fancybox").fancybox();
    }
});
Источник

Первое, что я вижу: не использовать $('<p>aaa</p><p>bbb</p>') но $('<div><p>aaa</p><p>bbb</p></div>'), Для Tooltipster важно иметь только один контейнерный тег для всего вашего, в некоторых случаях это имеет значение.

Если этого недостаточно, пожалуйста, подготовьте JSfiddle, для всех будет легче отлаживать.

Источник
Другие вопросы по тегам