Question

我正在处理的应用程序现在要求用户将鼠标悬停在图标上，该图标会启动工具提示，用户可以单击其中的链接以启动带有相应产品的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;
}

First Code我试过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

Answer 1

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

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

Javascript是一种函数式语言，您只需通过选项传递一个新函数。

示例：

$('#p1tooltip').tooltipster({
    functionReady: function () {
        $("a.fancybox").fancybox();
    }
});

Answer 2

我看到的第一件事是：不要使用$('<p>aaa</p><p>bbb</p>')而是使用$('<div><p>aaa</p><p>bbb</p></div>')。对于你所有的东西，只有一个容器标签是重要的，而且在某些情况下它会有所不同。

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

如何从工具提示（工具提示）启动灯箱（Fancybox）？

2 个答案: