Question

我的网站按以下方式设置：

4个用户组。每个用户组都可以看到不同的信息。一个例子是商店的库存数量。因此伦敦的用户无法看到曼彻斯特的库存情况。此信息来自数据库中的每个库存物料。因此，如果您有20个项目的列表，则会显示其各自的值。

我想做以下事情：

如果我或我允许的任何人，将其悬停在＆＃34; In Stock＆＃34;对于他们自己的商店，必须出现一个工具提示表，显示每个产品的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（如小提琴）

上动态添加到您的代码中

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>

在悬停

1 个答案: