Question

我使用tippy.js创建了多个工具提示内容，但是我无法制作动态内容。它仅显示第一个工具提示模板。

第二个问题是，当我将echo rsort($clicks);放在工具提示包装器中时，工具提示没有显示。当我删除style: display:none时，工具提示内容显示为正常（必须隐藏）。

如何使用子模板制作工具提示？

这也是codepen示例：https://codepen.io/wpuzman/pen/mQeeRQ

style: display:none

$(document).ready(function() {
  $('.box').each(function(){
      tippy(this, {
          arrow: true,
          arrowType: 'round',
          size: 'large',
          duration: 500,
          animation: 'scale',
          placement: 'left',
          interactive: true,
          theme: 'google',
          content: document.querySelector('.tooltip_templates').cloneNode(true)
      });
  });
});

.wrap {
  margin: 150px;
  position: relative;
}

.box {
  float: left;
  margin-right: 10px;
  cursor: pointer;
}

Answer 1

使用当前元素选择其模板：

$(document).ready(function() {
  $('.box').each(function(){
      tippy(this, {
          arrow: true,
          arrowType: 'round',
          size: 'large',
          duration: 500,
          animation: 'scale',
          placement: 'left',
          interactive: true,
          theme: 'google',
          content: this.querySelector('.tooltip_templates')
      });
  });
});

this.querySelector('.tooltip_templates')将选择具有该类的孩子作为内容。

您还可以通过为.each()使用函数来避免content循环：

tippy('.box', {
    animateFill: false,
    arrow: true,
    arrowType: 'round',
    size: 'large',
    duration: 500,
    animation: 'scale',
    placement: 'left',
    interactive: true,
    theme: 'google',
    content: function (reference) {
        return reference.querySelector('.tooltip_templates');
    }
});

使用tippy.js创建动态工具提示

1 个答案: