javascript - 内联构建工具提示注释而不是在文档上准备好吗？

Question

我有一个页面加载了 300 多个工具提示，每个工具提示大约有 1000 个字符。 jQuery UI 正在完成创建这些 div 元素的所有工作。我想知道是否可以内联构建它们，并保持它们隐藏，以加速片段缓存，然后仅将处理程序附加到从缓存读取的元素。

这是用于创建和处理工具提示的相当简单的 JS 代码。

  $(function() {
    $(document).tooltip({
      tooltipClass: "notes",
      content: function (callback) {
        callback($(this).prop('title'));
      }      
    });
  });

以及简化的 View 代码，它将工具提示的注释加载到可排序容器的标题属性中。

.portlet
  .portlet-header
    # Some info
  .portlet-content(title="#{ t.notes if t.notes }")
    # more info

如果在我为每个 .portlet 元素提供基本信息后 JS 必须创建数百个弹出元素，则片段缓存似乎没有帮助。我真的很感谢你的帮助。谢谢。

Answer 1

如何即时创建工具提示，例如。使用悬停来调用将创建工具提示的函数。

假设所有需要悬停的元素都具有类portlet-content，这里有一些可以帮助您入门的内容...尝试将 .tooltip 集成到函数中。请参阅 console.log 了解可以使用的元素)。

$(function() {
    function doToolTip(e) {
        console.log("Event: ");
        console.log(e);
        console.log("Event target: ");
        console.log(e.target);
        console.log("Title of the target: " + e.target.title);
    }
    $(document).on("hover", ".portlet-content", doToolTip);
});