javascript - 如何在自定义工具提示中显示数据

Question

我有一个看起来像下面结构的表。

user_id  Payment_status
1          Pending
2          Success
3          Failed

我已经创建了示例示例，悬停在用户 ID 上时，我得到了我需要在工具提示上显示的用户信息，我需要一个样式化的工具提示，它看起来像带有数据放置顶部的 bootstrap 工具提示。请看这个例子和TryHere

如果您在控制台中看到我正在获取悬停用户的数据，我只需要像工具提示一样显示这些数据，并且在悬停时我需要隐藏。请检查 fiddle 并打开控制台。你会得到的。问我是否缺少任何信息。

这是JS代码

var orders=[
{id: 1, first_name: "Sud", last_name: "D", phone: "45687889", email: "sud@peace.org"},
{id: 2, first_name: "Mat", last_name: "D", phone: "123456789", email: "mat@peace.org"},
{id: 3, first_name: "Suraj", last_name: "D", phone: "321145789", email: "suraj@peace.org"}
];

$('.user_id').hover(function(){
console.log('hi'+$(this).text());
var current_id=$(this).text();
                for (var i =0;i<=orders.length - 1; i++) {
                    if (orders[i].id==current_id) {
                        console.log('hi'+orders[i].first_name+'<br>'+orders[i].last_name+'<br>'+orders[i].email);
                    };
                };
})

HTML代码

<table>
  <thead>
    <tr>
      <th>user_id</th>
      <th>Payment Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="user_id"  href="">1</a></td>
      <td>Success</td>
    </tr>
     <tr>
      <td><a class="user_id" href="">2</a></td>
      <td>Failed</td>
    </tr>
     <tr>
      <td><a class="user_id" href="">3</a></td>
      <td>Pending</td>
    </tr>
  </tbody>
</table>

Answer 1

如果您将此行添加到您的 javascript 中，您可以看到工具提示

 $('.user_id').hover(function(){
console.log('hi'+$(this).text());
var current_id=$(this).text();
                for (var i =0;i<=orders.length - 1; i++) {
                    if (orders[i].id==current_id) {
                                  console.log('hi'+orders[i].first_name+'<br>'+orders[i].last_name+'<br>'+orders[i].email);
                     $(this).attr('title','hi'+orders[i].first_name+'<br>'+orders[i].last_name+'<br>'      +orders[i].email);
                    };
                };
})