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

Question

我试图在单击按钮时打开提示工具提示，而不是将工具提示附加到此按钮，而是在它自己的位置打开它。

在我的示例中，我的菜单中有一个添加到购物车按钮和一个购物车图标，在提示工具提示中显示了购物车。我希望在单击“添加到购物车”按钮时也显示此工具提示。

我试图创建一个我的 tippy 实例并将其与 show() 方法一起使用，但我没有成功。

举个简单的例子：有element1和element2。 Element1 的 tippy 代码运行良好，但现在我还想在单击 element2 时触发 element1 上的 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 传递到我的添加到购物车功能，但我一直收到此错误：

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

如果您查看文档，Show 是正确的方法：https://atomiks.github.io/tippyjs/v6/methods/ 所以它可能找不到我的 tippy 实例。这是为什么？

定期打开工具提示效果很好（单击购物车图标），只是在单击“添加到购物车”按钮时不起作用。

在我的点击函数中记录 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>

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

How to open TippyJS tooltip on click of a button elsewhere on the page?

javascript

jquery

tippyjs