JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<form>
<p title="tooltip!">
  This p-tag has a title.
</p>
<p>
  <input name="title" value="This input has name attribute of 'title'">
</p>
<p>
  Tooltips on dropdown options don't work well (hidden behind), so I disable it there:
  <select>
    <option title="First option">Option 1</option>
    <option title="Second option">Option 2</option>
    <option title="Third option">Option 3</option>
  </select>
</p>

</form>

CSS

body {
  font-family: sans-serif;
}
input {
  min-width:20em
}
/* Some tooltip css */
.ui-tooltip {
	white-space: pre-line;
	background-color: #fafae6;
	border: #b0b0b0 1px solid;
	border-right-color: #707070;
	border-bottom-color: #707070;
	display: inline-block;
	padding: .2em .4em;
	color: #000;
	position: absolute;
	z-index: 99;
	max-width: 33em;
}
.ui-helper-hidden-accessible {
	display:none
}

JavaScript

$(document)
	.tooltip({
		items: ':not(option)',
		show: {duration: 0},
		hide: {duration: 0},
		content: function () {
			return $(this).prop('title');
		}
	});