如何在单击页面其他地方的按钮时打开TippyJS工具提示？

Question

当一个按钮被点击时，我试图打开一个提示，不是在这个按钮上附加工具提示，而是在它自己的位置打开它。

在我的示例中，我在菜单中有一个add to cart按钮和一个购物车图标，它在提示工具提示中显示购物车。我希望这个工具提示也显示当点击添加到购物车按钮。

我尝试创建一个tippy实例，并将其与show()方法一起使用，但是我没有运气。

举个简单的例子:有element1和element2。Element1的tippy代码工作得很好，但现在我也想在element1上单击element2时触发tippy。

我的代码：

const tippyinstance = tippy('.carttip', {
  theme: 'blue',
  trigger: 'click',
  allowHTML: true,
  animation: 'scale-subtle',
  maxWidth: 400,
  boundary: 'viewport',
  interactive: true,
  content: function (reference) {
    return reference.querySelector('.tooltipcontent');
  },
  onShow(instance) {
    refreshcart(true, instance);
  }
});

我的添加到购物车代码：

$('body').on('click', ".addtocart", function (e, tippyinstance) {
  e.preventDefault();
  var form_data = $(".addtocartform").serialize();
  $.ajax({
    type:'post',
    url:"includes/addtocart.php",
    data: { form_data: form_data },
    success:function(data){
      tippyinstance.show();
    },
  });
});

我还具有这个函数，它总是刷新工具提示的内容，因此显示了最新的信息：

function refreshcart(force, tippyInstance) {
  $.ajax({
      type: 'post',
      url: 'includes/refreshcart.php',
      data: ({}),
      success: function(data){
          $('body #headercart').empty().append(data);
          tippyInstance.popperInstance.update();
      }
  });
}

我尝试将tippyinstance传递给我的add to cart函数，但一直收到以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'show')

如果您查看docs :https://atomiks.github.io/tippyjs/v6/methods/，那么显示是一个正确的方法，因此它可能找不到我的tippy实例。为什么会这样呢？

打开工具提示正常工作(点击购物车图标)，只是在点击add to cart按钮时就不行了。

在单击函数中记录console.log({tippyinstance})：

{tippyinstance: Array(1)}
tippyinstance: Array(1)
0: {id: 1, reference: div.carttip.module-icon.module-icon-cart, popper: div#tippy-1, popperInstance: null, props: {…}, …}
length: 1
[[Prototype]]: Array(0)
[[Prototype]]: Object

Answer 1

我认为您正在寻找triggerTarget属性：

tippy(targets, {
  triggerTarget: null,                          // default (reference is used)
  triggerTarget: someElement,                   // Element
  triggerTarget: [someElement1, someElement2],  // Element[]
});

你可以这样使用它：

​

tippy('.add', {content: 'locate the cart'});

tippy('.cart', {
  triggerTarget: [...document.querySelectorAll('.add')],
  trigger: 'click',
  content: ' Hey! ',
  animation: 'tada',
  theme: 'forest'
});

tippy('.cart', {content: 'checkout'});

body {
  background: wheat;
}

.cart {
  position: fixed;
  right: 5rem;
  bottom: 2rem;
  color: green;
}

/* add custom animation */
.tippy-box[data-animation=tada] {
  animation: tada 1s linear 3;
  filter: contrast(1.5);
}

/* add custom theme */
.tippy-box[data-theme~='forest'] {
  background: linear-gradient(90deg, #6bbb62, #c4e466);
  color: black;
}

.tippy-box[data-theme~='forest']>.tippy-arrow::before {
  border-top-color: #81df76;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css" />
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<div class="cart">
  <i class="fas fa-shopping-cart"></i>
</div>
Item 1: <button class="add">Add</button><br><br> Item 2: <button class="add">Add</button>

​