"Show" method to show/hide Tippys not working on browser "mousedown" events

[justsomeusername2020]

Description I have what's probably a pretty simple issue, but maybe its more complicated. So here goes..

On my webpage I wish to:

• programmatically show all (or specified) Tippys when the left mouse button is clicked anywhere on the webpage (not just specifically on the Tippy-enabled elements themselves).

• And then when we subsequently click the right mouse button anywhere on the webpage, all Tippys are hidden.

There's no Tippy prop that can replicate this behavior (correct me if I'm wrong), but I can achieve this by using a javascript function for mousedown events. (I played with the onClickOutside prop for bit, but I wish to assign the event action to any mouse button (left, middle, right).

Setup I'm using local Tippy CSS on my production webpage. But I've tried using the CDN CSS too, and the issue is present using both, so this issue is not CSS related.

Problem I'm having trouble forming the Tippy Instances correctly, so that the Tippy is displayed correctly using the instance.show() method.

Here's a JSFiddle with a demo of my issue: https://jsfiddle.net/playdohsniffer/3nkp7saz/42/

a) If you hover the mouse pointer over any fruit, the Tippy is shown correctly (on right side) as expected.

• Normally, I plan to disable this using the trigger: 'manual' prop, but for this demo purpose, I've left that enabled.

b) Also when hovering the mouse pointer over any fruit, there's an additional "odd-shaped arrow with no content" being created at the top.

• The Constructor tab in User Manual mentions this will occur when the "CSS selector is not specific enough", but I don't understand what I'm doing wrong...more than likely, my CSS selector (document.querySelector) isn't correct.
• When I disable the Tippy instance constructs (by commenting out lines 24, 25, 33, 34 in the Javascript), those "odd-shaped arrows" disappear. This seems to indicate that my CSS selector is not formed correctly.

Suspected root cause Lines 24, 25 in the Javascript I suspect are my problem. Do I have the wrong CSS selectors? How do I fix these? I'm unable to figure it out.

Many thanks in advance for advise...

[justsomeusername2020]

Update: After reviewing a number of closed issues here, and seeing more complex examples of Tippy constructs (than what's shown in the user manual), I finally realized that in my Javascript, I errantly had the CSS selector separated from the Tippy construct, which was causing those extra, empty (odd-shaped) Tippys.

After combining them, its work perfectly.

const tip1 = tippy(document.querySelector('#apples') , { content: "<div><strong>Fruit Variety</strong></div><div>Red Delicious</div>", allowHTML: true, placement: 'right', trigger: 'manual', })