JSFiddle - React, Tailwind, and code Playground

by thomi_ch

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="upper" style="width: 500px, height: 500px; background-color: #ff0000;">
  <div id="dialog">
    <a href="#" tooltip="tooltip" title="Test ToolTip" style="float:left;">TEST</a>
    <a href="#" tooltip="tooltip" title="Test ToolTip" style="float:right; margin-right: 50px;">TEST</a>
  </div>
</div>

JavaScript

$("#dialog").dialog({
	title: 'testtest',
  modal: false,
  resizable: false,
  draggable: false
});
$("a[tooltip=tooltip]").tooltip({
	track:true,
  content: function(){
  	return $(this).attr('title')
  },
  position: {
  	my: "left top+15",
    at: "left bottom",
    collision: "flip",
    within: "#upper"
  }
});