JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<div id='wrapper'>
  <table id='mytable'>
  <tr>
    <td>basic data in my cell 1</td>
    <td>basic data in my cell 2</td>
    <td>basic data in my cell 3</td>
    <td>basic data in my cell 4</td>
  </tr>
  <tr>
    <td>basic data in my cell 5</td>
    <td>basic data in my cell 6</td>
    <td>basic data in my cell 7</td>
    <td>basic data in my cell 8</td>
  </tr>
  <tr>
    <td>basic data in my cell 9</td>
    <td>basic data in my cell 10</td>
    <td>basic data in my cell 11</td>
    <td>basic data in my cell 12</td>
  </tr>
</table>
</div>

<div id='myDialog' style='display:none;' title='More info dialog'>
  <div id='dialogContent'>
  </div>
</div>

CSS

td {
  border : 1px solid grey;
  cursor : pointer;
}

JavaScript

// add info to every td
$('#mytable td').prop('title','click for more info');

//generic click event
$('#mytable td').on('click', function(){
	var data = $(this).html(); //of course, you dont want to display what's inside the cell, but you get the way it works
  //you should destroy previous dialog, look in the documentation
  $('#dialogContent').html(data);
  $('#myDialog').dialog();
})