JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.tablesort.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/popup.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/popup.min.js"></script>
<table class="ui small celled sortable table">
	<thead>
		<tr>
			<th>data</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="incidedFull" data-variation="inverted" data-html="Full text one to show. ..">
				Full text one..
			</td>
		</tr>
		<tr>
			<td class="incidedFull" data-variation="inverted" data-html="Full text two to show. ..">
				Full text two..
			</td>
		</tr>
		<tr>
			<td class="incidedFull" data-variation="inverted" data-html="Full text three to show. ..">
				Full text three..
			</td>
		</tr>
		<tr>
			<td class="incidedFull" data-variation="inverted" data-html="Full text four to show. ..">
				Full text four..
			</td>
		</tr>		
	</tbody>
</table>

JavaScript

$(function() {
		var table = $('<table></table>');
		$('table').tablesort().data('tablesort');
	});

  $('.incidedFull')
    .popup({
    observeChanges: false,
    on: 'hover'
  });