Tooltip showing hidden values in table format on hover

Question

My site is set up in the following way:

4 user groups. Each user group can see different information. An example would be stock quantity for a store. So the user from London can't see the stock availability for Manchester. This information is taken from the database for EACH item in stock. So if you have a list of 20 items, their individual values will be displayed.

I would like to do the following:

If I, or anyone I give permission to, hovers over the "In Stock" column for their own store, a tooltip table must appear showing the current stock levels for the 3 other stores, for each individual product. So if I hover over item SKU-001, I will only see the stock availability for that item. I had an issue where it was displaying the whole list for each item.

I was thinking of this:

<table>
<tr>
<th>Store1></th>
<th>Store2></th>
<th>Store3></th>
<th>Store4></th>
</tr>
<?php foreach($this->products as $product) { ?>
<tr>
<td id="stock1" title="myFunction">Stock of Item 1st store</td> *If I hover/mouseover here, another table must appear showing only store name and values of "#stock2, #stock3 and #stock4* for the stock item I am hovering on.
<td id="stock2">Stock of Item 2nd store</td>
<td id="stock3">Stock of Item 3rd store</td>
<td id="stock4">Stock of Item 4th store</td>
</tr>
<?php } ?>
</table>

Here is some code I wrote:

function myFunction() {
var x = document.createElement("TABLE");
x.setAttribute("id", "table10");
document.body.appendChild(x);

var y = document.createElement("TR");
y.setAttribute("id", "myTr");
document.getElementById("myTable").appendChild(y);

var z = document.createElement("TD");
var t = document.getElementByID("riyadhbalance").value();
z.appendChild(t);
document.getElementById("myTr").appendChild(z);

However, for some reason this is not working. I have not found a way to include a tooltip. All the stock values are there for each individual item, so I just need to find a way to add the 3 values for the other stores and display them in a table format via a tooltip. That would be ideal.

So basically the tooltip should show the 3 values of the stores which are currently not on display, as the other 3 values are hidden. The user can only see their store's stock levels. But I would like to include this for myself as it would make it easier to view stock levels across the board.

Answer 1

Check this solution with jQuery and Bootstrap Working fiddle

You have four options:

1 - You can dynamically add it to your code on domReady (like the fiddle)

2 - You can directly print the needed html to make the plugin work. Check docs POPOVER or TOOLTIP

<button type="button" class="btn btn-lg btn-danger my_elements" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

// and then, just call from javscript
<script>
    $('.my_elements').popover(); // or $('.my_elements').tooltip();
</script>

3 - You can create it when you hover any element. Like the following example (this is particulary helpful if you have a lot of elements needing popover/tooltip, which would consume a lot of time and memory to init and handle)

<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>
  </tbody>
</table>

<script>
$('.stock_p').on('mouseover', function(){
    // get data from AJAX
    // create table element
    $(this).attr('title', table_element);
    $(this).tooltip({
        placement: 'top',
        trigger: 'hover',
        html: true,
        container: 'body',
    }).tooltip('show');
});
</script>

4 - with AJAX

<?php
// server side PHP
$other_stores_stock = [ "store_1" => 5, "store_2" => 20, "store_3" => 50 ];
header( 'Content-Type: application/json' );
echo json_encode( $other_stores_stock );
?>


//client side JS - like 1st example
<script>
$('.stock_p').on('mouseover', function(){
    $.ajax({
        url: your_url,
        type: 'POST',
        data: { your_data: 'get_stock_qty"},
        dataType: "json",
        async: false,
        success: function (res) {
            let table_html = '<table><tr><td>'+res['store_1']+'</td><td>'+res['store_2']+'</td><td>'+res['store_3']+'</td></tr></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', table_html);
            $(this).popover('show');
        }
    });
});
</script>