JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDlg"></div>
<div id="questiona" class="allques">
    <div class="question">What is 2 + 2?</div>
    <div class="answer">4</div>
</div>
<div id="questionb" class="allques">
    <div class="question">What is the 12th Imam?</div>
    <div class="answer">The totally wacky reason why Iran wants a nuclear bomb. <a href="http://www.goodreads.com/book/show/9246711-the-twelfth-imam" target="_blank">Look at this</a></div>
</div>

CSS

.allques{margin:30px;}
.answer{display:none;}

JavaScript

var que,ans;

$('#myDlg').dialog({
    autoOpen:false,
    modal:true,
    width: 500,
    height: 'auto',
    buttons: {
        "See Answer": function(){
            $('#myDlg').html(ans);
            $('.ui-dialog-buttonset').next('button').hide();
        },
        "Close": function(){
            $('#myDlg').html('').dialog('close');
        }
    }
});

$('.allques').hover(
    function(){
    que = $(this).find('.question').html();
    ans = $(this).find('.answer').html();
    $('#myDlg').html(que).dialog('open');
    },
    function(){
        //do nothing on hover-OUT
    }
);
$('#myDlg').hover(
    function(){
        //do nothing on hover-IN
    },
    function(){
        //for some reason, this fires when move onto buttons, so just leave as eg.
        //$('#myDlg').dialog('close');
    }
);