1

我现在正在开发的应用程序需要用户将鼠标悬停在一个图标上，该图标会启动一个工具提示，用户可以单击其中的一个链接来启动一个带有相应产品的花式框。我遇到了工具提示器没有启动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

4

2 回答 2

1

您的问题是，当 Fancybox 触发器初始化所有内容时，DOM 中不存在 tooltipster 内容选项中的 Fancybox 链接。

解决方案是将您的工具提示器内容选项设置为页面上已有的元素（隐藏 div 内的 div 应该可以正常工作），或者在工具提示器 functionReady 回调选项中重新初始化 Fancybox。

Javascript 是一种函数式语言，您可以通过选项传回一个新函数。

例子：

$('#p1tooltip').tooltipster({
    functionReady: function () {
        $("a.fancybox").fancybox();
    }
});
于 2014-05-04T21:33:07.223 回答
-1

我看到的第一件事：不要使用$('<p>aaa</p><p>bbb</p>')但是$('<div><p>aaa</p><p>bbb</p></div>')。对 Tooltipster 来说，所有东西都只有一个容器标签很重要，这在某些情况下会有所不同。

如果这还不够，请准备一个JSfiddle，它会更容易为大家调试。

于 2014-05-04T20:40:08.753 回答