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" columm 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.
1 Answers
Answers 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> 
0 comments:
Post a Comment