JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
	<link rel="stylesheet" href="mwe.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/openseadragon.min.js"></script>
	<script src="mwe.js"></script>
</head>

<body>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="controls">
	<label class="labels"><input id="showOverlays" type="checkbox"><a id="selector" title="">Show overlays</a></label>
	<a class="nav previous" title="Previous" id="prv"> < </a>
	<a class="nav next" title="Next" id="nxt"> > </a>
</div>

<div id="example-runtime-overlay" class="openseadragon" />

<div id="example-tip" style='display:none;width:250px;background-color:#fff;'>
	<p>
		The overlay can provide a class name and ID to bind additional events to.
	</p>
</div>

</body>

</html>

CSS

body {
	margin: 0;
	color: #333;
	font-family: Helvetica, Arial, FreeSans, san-serif;
	background-color: #121621;
}
.openseadragon{
	width:      800px;
	height:     600px;
	border:     1px solid black;
	color:      #333;
	background-color: black;
}
.highlight{
	opacity:    0.4;
	filter:     alpha(opacity=40);
	outline:    6px auto #0A7EbE;
	background-color: white;
}
.highlight:hover, .highlight:focus{
	filter:     alpha(opacity=70);
	opacity:    0.7;
	background-color: transparent;
}
.nav {
	cursor: pointer;
	display: inline-block;
	font-size: 25px;
}
.controls {
	text-align: center; 
	display: table;
	background-color: #eee;
	table-layout: fixed;
	width: 800px;
}

JavaScript

var runtimeViewer = OpenSeadragon({
	id:            "example-runtime-overlay",
	prefixUrl:     "openseadragon/images/",
	showSequenceControl: true,
	sequenceMode:  true,
	nextButton:     "nxt",
	previousButton: "prv",
	tileSources: [{
		type: 'image',
		url:  'https://farm9.staticflickr.com/8173/7993440342_09fe0535ad_k_d.jpg',
		buildPyramid: false,
		overlay: [{
			id: 'example-overlay',
			x: 0.33,
			y: 0.23,
			width: 0.2,
			height: 0.15,
			className: 'highlight',
			caption: 'Nice detail'
		}]
	},{
		type: 'image',
		url: "http://www.europeana-newspapers.eu/wp-content/uploads/2014/07/fort-sumter-south-carolina.jpg",
		buildPyramid: false,
		overlay: [{
			id: 'example-overlay',
			x: 0.70,
			y: 0.08,
			width: 0.17,
			height: 0.07,
			className: 'highlight',
			caption: 'good news'
		}]
	}]
});


var page = 0;
runtimeViewer.addHandler("page", function (data) {
	page = data.page;
});

$('.next').click(function() {
	radio.prop('checked', false);
});

$('.previous').click(function() {
	radio.prop('checked', false);
});

var radio = $('#showOverlays')
	.prop('checked', false)
	.change(function() {
		if (radio.prop('checked')) {
			var boxes = runtimeViewer.tileSources[page].overlay[0];
			var elt = document.createElement("div");
			elt.id = boxes.id;
			elt.rel = "tooltip";
			elt.className = "highlight";
			
			runtimeViewer.addOverlay({
				element: elt,
				location: new OpenSeadragon.Rect(boxes.x, boxes.y, boxes.width, boxes.height)
			});
		} else {
			var boxes = runtimeViewer.tileSources[page].overlay[0];
			var element = document.getElementById(boxes.id);
			if (element) {
				element.parentNode.removeChild(element);
				delete element;
			}
		}
	});

$(document).ready(function() {
 $(function () {
	 $('#selector').tooltip({			// Hover on radiobutton label: works
	 //$('#example-overlay').tooltip({	// Hover on overlay: does not work
		content: 'TOOLTIP CONTENT'
	 });
 });
});

//$(document).ready(function() {
//	$(document).on('mouseenter',...