JSFiddle - React, Tailwind, and code Playground

by Yuri S

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table" id="my_table">
  <thead>
    <tr>
      <th>SKU</th>
      <th>Description></th>
      <th>Stock Tooltip</th>
      <th>Stock Popover</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>SKU-0001</td><td>This is a description for SKU-0001</td><td class="stock_t">5</td><td class="stock_p">5</td></tr>
    <tr><td>SKU-0002</td><td>This is a description for SKU-0002</td><td class="stock_t">10</td><td class="stock_p">10</td></tr>
    <tr><td>SKU-0003</td><td>This is a description for SKU-0003</td><td class="stock_t">15</td><td class="stock_p">15</td></tr>
    <tr><td>SKU-0004</td><td>This is a description for SKU-0004</td><td class="stock_t">20</td><td class="stock_p">20</td></tr>
    <tr><td>SKU-0005</td><td>This is a description for SKU-0005</td><td class="stock_t">25</td><td class="stock_p">25</td></tr>
    <tr><td>SKU-0006</td><td>This is a description for SKU-0006</td><td class="stock_t">30</td><td class="stock_p">30</td></tr>
    <tr><td>SKU-0007</td><td>This is a description for SKU-0007</td><td class="stock_t">35</td><td class="stock_p">35</td></tr>
    <tr><td>SKU-0008</td><td>This is a description for SKU-0008</td><td class="stock_t">40</td><td class="stock_p">40</td></tr>
    <tr><td>SKU-0009</td><td>This is a description for SKU-0009</td><td class="stock_t">45</td><td class="stock_p">45</td></tr>
    <tr><td>SKU-0010</td><td>This is a description for SKU-0010</td><td class="stock_t">50</td><td class="stock_p">50</td></tr>
  </tbody>
</table>

CSS

.stock_t, .stock_p {cursor: pointer}

JavaScript

function GetStock(stock){
	stock = parseInt(stock);
	// returns stock of Store #2, Store #3 and Store #4
  // replace with needed ajax
  return [stock+1, stock+2, stock+3];
}

var thead = "<thead><tr><th>Store #1</th><th>Store #2</th><th>Store #3</th></tr></thead>"

$('.stock_p').each(function(){
	var this_stock = $(this).text();
	var other_stock = GetStock(this_stock);
  var html_content = "<table class='table table-bordered table-condensed'>";
  html_content += thead;
  html_content += "<tbody><tr><td>"+other_stock[0]+"</td><td>"+other_stock[1]+"</td><td>"+other_stock[2]+"</td></tr></tbody>";
  html_content += "</table>";
  $(this).attr('title', 'Stock value for other Stores');
  $(this).attr('data-placement', 'left');
  $(this).attr('data-toggle', 'popover');
  $(this).attr('data-trigger', 'hover');
  $(this).attr('data-html', true);
  $(this).attr('data-content', html_content);
  $(this).popover();
});

$('.stock_t').each(function(){
	var this_stock = $(this).text();
	var other_stock = GetStock(this_stock);
  var html_content = "<table class='table table-bordered table-condensed'>";
  html_content += thead;
  html_content += "<tbody><tr><td>"+other_stock[0]+"</td><td>"+other_stock[1]+"</td><td>"+other_stock[2]+"</td></tr></tbody>";
  html_content += "</table>";
  $(this).attr('data-toggle', 'tooltip');
  $(this).attr('title', html_content);
  $(this).tooltip({
  	placement: 'left',
   	trigger: 'hover',
    html: true,
    container: 'body',
  });
});