JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<a id="user1">User 1
    <span class="info">
        <br>
        Here's some info to show later
    </span>
</a>
<br>
<br>
<p class="js-show-help"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHjSURBVFhH7ZXLSwJRFIf939q0S4mMIINQCHEXQuAyUHAR0TKRcOEiaR22iTZFyeSYPZTSjCwTK/JFlo/mF/dyKYQWk3Pu4GI+OCDneO/54HLm2CxkcTwxAao4mZw8FNfSwS6mgN2jzs5q5JKUgr10ml6SUhDX1/SS1ILkkjIESSVlCZJJyhQkkZQtyMKQJKWgnhBt9cMOmYUlyCitr+N0Zgaf1arI6Ee6YL/VgmK34z4SwWM8LrL6kS/YbEJxOFDe2hpPQYY6N4fzpSW8HR2JjH5MESyEQrxRr9EQGf2YIlhJJHijUTBFsByN8kZjOcUMdX4eD7EYiuGwyOhHumBDVZHz+wFN44PSzudFRR/SBfMrK6grCv/durxExuVC/x/DIlXw/e4OWY8H2mCA92IRL/v7UKameNN8IICb1VU+4ZXtbXzWauLUMNIE2QZh/2PBNsm514vSxgaednaQdjp5/nlvj38b7zc3cba4KE4OQy74UamgEAz+yNVTKQw6HVH9pba7y/czE7/w+XC1vCwqw5AKNjMZnE5P43Ztja+3TrksKn+j9ft8aNq5HL66XZEdhlQws7CAWjKJrNuN14MDkTUGqSB7WvZs7PmoIBWUgSVoFEvQKJagUUYWNDNEWwtibLZvQEXZRq+VyIMAAAAASUVORK5CYII=" alt="PDF File" class="pdfICO"></p>
<div id="iFrameContainer">
<div class="located-content js-help-content">   
    <iframe id="iFrame1" width="100%" height="300"></iframe>
</div>

</div>

CSS

.info {
    display:none;
}

JavaScript

var doc1 = "https://convserv-dev.eastus2.cloudapp.azure.com/Render/View?Path=C:\\dev\\data\\49691641-SPRDL115D0034.PDF&pagenumber=1&parse=True&template=~%2Ffiles/%2FPreviewer%2Fviews%2Fviewer.cshtml";
var doc2 = "https://convserv-dev.eastus2.cloudapp.azure.com/Render/View?Path=C:\\dev\\data\\54199715-SPE7M516M9036.PDF&pagenumber=1&parse=True&template=~%2Ffiles/%2FPreviewer%2Fviews%2Fviewer.cshtml";
$('#iFrame1').hide();

$(".pdfICO")
    .on("mouseenter", function(){
        //displayinfo( $(this) );
        $('#iFrame1').show();
        //$('#iFrameContainer iframe').attr('src',doc1);
    })
    .on("mouseleave", function(){
        //hideinfo( $(this) );
        $('#iFrame1').toggle();
    })
    .on("click", function(){
        $(this).off("mouseleave");
        $('#iFrame1').toggle();
    
    });