javascript - 悬停时以表格格式显示隐藏值的工具提示

Question

我的网站是这样设置的:

4 个用户组。每个用户组可以看到不同的信息。一个例子是商店的库存数量。因此，来自伦敦的用户看不到曼彻斯特的库存情况。此信息取自每个库存商品的数据库。因此，如果您有一个包含 20 个项目的列表，将显示它们各自的值。

我想做以下事情:

如果我或我授权的任何人将鼠标悬停在他们自己商店的“库存”列上，则必须出现一个工具提示表，显示其他 3 家商店的每个产品的当前库存水平。因此，如果我将鼠标悬停在商品 SKU-001 上，我将仅看到该商品的库存情况。我有一个问题，它显示每个项目的整个列表。

我在想这个:

<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>

这是我写的一些代码:

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);

但是，由于某些原因，这不起作用。我还没有找到包含工具提示的方法。每个单独项目的所有库存值都在那里，所以我只需要找到一种方法来为其他商店添加 3 个值，并通过工具提示以表格格式显示它们。那将是理想的。

所以基本上工具提示应该显示当前未显示的商店的 3 个值，因为其他 3 个值被隐藏。用户只能看到他们商店的库存水平。但我想为自己包括这一点，因为它可以更轻松地全面查看库存水平。

Answer 1

使用 jQuery 和 Bootstrap 检查此解决方案 Working fiddle

您有四种选择:

1 - 您可以将其动态添加到 domReady 上的代码中(就像 fiddle 一样)

2 - 您可以直接打印所需的 html 以使插件工作。检查文档 POPOVER或 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 - 您可以在悬停任何元素时创建它。像下面的例子(如果你有很多元素需要 popover/tooltip，这将特别有用，这会消耗大量的时间和内存来初始化和处理)

<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 - 使用 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>