JSFiddle - React, Tailwind, and code Playground
HTML
<div id="sprite">
<span class="radopt">A</span>
<span class="radopt">B</span>
<span class="radopt">C</span>
<span class="radopt">D</span>
<span class="radopt">A</span>
<span class="radopt">B</span>
<span class="radopt">C</span>
<span class="radopt">D</span>
<span class="radopt">A</span>
<span class="radopt">B</span>
<span class="radopt">C</span>
<span class="radopt">D</span>
<span class="radopt">A</span>
<span class="radopt">B</span>
<span class="radopt">C</span>
<span class="radopt">D</span>
<span class="radopt">A</span>
<span class="radopt">B</span>
<span class="radopt">C</span>
<span class="radopt">D</span>
<span class="radopt">A</span>
<span class="radopt">B</span>
<span class="radopt">C</span>
<span class="radopt">D</span>
</div>
CSS
#sprite {
position:relative;
margin:75px;
width:75px;
height:75px;
border:1px solid black;
background-color:gray;
}
.radopt {
display:none;
position:absolute;
width:30px;
width:30px;
border:1px solid blue;
background-color:aqua;
}
JavaScript
(function($) {
$.fn.radial = function() {
return this.each(function() {
var obj = $(this);
var hh = (obj.height() / 2) - 15;
var hw = (obj.width() / 2) - 15;
var top = obj.position().top;
var left = obj.position().left;
var angle = 0;
var children = $('.radopt',obj);
var eachiteration = (360 / children.length);
children.each(function() {
var rads = 3.14 * (angle / 180);
var newx = hw + (100 * Math.cos(rads));
var newy = hh + (100 * Math.sin(rads));
angle += eachiteration;
$(this).css('left',newx);
$(this).css('top',newy);
$(this).show();
});
});
};
})(jQuery);
$(document).ready(function() {
$('#sprite').mouseenter(function() {
$(this).radial();
}).mouseleave(function() {
$('.radopt').hide();
});
});