JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<div id="div_" title="foo">bar</div>
<input type="radio" class="radiobutton1" /> button 1
<input type="radio" class="radiobutton2" /> button 2
JavaScript
$('#div_').dialog({
autoOpen: false,
});
$(".radiobutton1").hover(
function() {
$('#div_').dialog({
title: "Iamge Left)"
});
$('#div_').removeClass("radiobutton1_1 radiobutton2").dialog('open');
var target = $(this);
$("#div_").dialog("widget").position({
at: 'left top',
my: 'center bottom',
of: target
});
}, function() {
$('#div_').dialog('close');
});
$(".radiobutton2").hover(
function() {
$('#div_').dialog({
title: "Images Right"
});
$('#div_').removeClass("radiobutton1_1 radiobutton2").addClass("radiobutton2").dialog('open');
var target = $(this);
$("#div_").dialog("widget").position({
my: 'left top',
at: 'center bottom' ,
of: target
});
}, function() {
$('#div_').dialog('close');
});