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

Question

I am trying to open a tippy tooltip when a button is clicked, not append the tooltip to this button but open it in it's own spot.

In my example I have an add to cart button and a shoppingcart icon in my menu that shows the shopping cart inside a tippy tooltip. I want this tooltip to also show when clicking the add to cart button.

I've tried to create an instance of my tippy and use this with the show() method but I have no luck.

So as a simple example: there is element1 and element2. Element1 has the tippy code which works fine, but now I also want to trigger the tippy on element1 when clicking element2.

My code:

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);
  }
});

My add to cart code:

$('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();
    },
  });
});

I also have this function to always refresh the contents of the tooltip so the latest information is shown:

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

I tried passing tippyinstance to my add to cart function but I keep getting this error:

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

Show is a correct method if you look at the docs :https://atomiks.github.io/tippyjs/v6/methods/ So it probably cannot find my tippy instance. Why is that?

Opening the tooltip regularly works fine (clicking the shopping cart icon), just not when clicking the add to cart button.

Logging console.log({tippyinstance}) inside my click function:

{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

I think you are looking for triggerTarget property:

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

You can use it like this:

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>