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

`$('body').on('click', ".addtocart", function (e, tippyinstance) {` have you tried with only e as a param? Also add a `console.log({tippyinstance})` right below - what does it print? — F. Müller, Jan 25 '22 at 08:37
@F.Müller If I remove that I get: `tippyinstance.show is not a function`. I added what is logged in my question. — twan, Jan 25 '22 at 08:55

score 3 · Accepted Answer · answered Jan 26 '22 at 08:11

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>

Thank you! I already fixed it with this line: `tippyinstance[0].show()`, I had to add `[0]` for the method to work for some reason but I will accept your answer because this works too and the info is a bit more extensive. — twan, Jan 26 '22 at 08:26
The constructor `tippy('.add',{})` creates separate tooltip instances for each `.add` element, and returns array of them. So if you have 3 add buttons, with `class='add'` then it'll create 3 tippy instances. Using `triggerTarget` saves you from extra work of showing it yourself. — the Hutt, Jan 26 '22 at 08:36

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

1 Answers1