非常非常简单的qtip实现

Question

我想用 qTip 创建工具提示，但他们的页面上有很多荒谬的示例，非常复杂。

我想要这样的东西：

<span qtip="This is the text in my tooltip">This text has a tooltip</span>

这可能吗？

$(document).ready 不是一个选项，因为我有一个包含多个单元格的循环，需要所有这些单元格的工具提示。

元代码：

foreach Customer in List<Customers>
{
    <tr>
        <td>
            <span qtip="Tooltip for Name">Customer.Name</span>
        </td>
        <td>
            <span qtip="Tooltip for Address">Customer.Address</span>
        </td>
        <td>
            <span qtip="Tooltip for Phonenumber">Customer.Phonenumber</span>
        </td>
    </tr>
}

qtip 是否可以做到这一点，或者是否有其他东西可以生成与上述类似的漂亮的工具提示？

感谢大家的帮助。

Answer 1

文档建议您应该能够使用以下 JS：

$('[qtip!=""]').qtip({
  content: {
    attr: 'qtip'
  }
});

这应该获取所有具有 qtip 属性的元素，并将 qTip 应用于它们。

不过我很好奇你说的

是什么意思

The $(document).ready is not an option since I have a loop with several cells that needs tooltips all of them.

您是说您的客户列表是动态添加的，无需重新加载页面？如果是，请说明发生的地方。

为了安全起见，如果您的客户名单没有改变，您应该真正使用 $(document).ready。

这是一个基于问题的示例：

$(document).ready(function() {
  $('[qtip!=""]').qtip({
    content: {
      attr: 'qtip'
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.css">

<table>
  <tbody>
    <tr>
      <td>
        <span qtip="Tooltip for Name">Customer.Name</span>
      </td>
      <td>
        <span qtip="Tooltip for Address">Customer.Address</span>
      </td>
      <td>
        <span qtip="Tooltip for Phonenumber">Customer.Phonenumber</span>
      </td>
    </tr>
  </tbody>
</table>

非常非常简单的qtip实现

Very very simple qtip implementation

javascript

jquery

html

qtip2

qtip