the app I am working on right now requires the user to hover over an icon, which launches a tooltip, which the user can click a link inside of to launch a fancybox with the corresponding product. I am running into the problem of the tooltipster not launching the fancybox.

Here is the code I am currently using. 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 I tried 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>') });

Second Code I tried 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