Tooltipster not working on mobile devices - Wordpress

Question

Tooltipster jquery plugin is loaded to trigger tooltips "on hover" state.

When on a mobile device, the "hover" trigger does not load - I would therefore like to change the trigger to "click" when on mobile devices.

I have tried the following edit in tooltipster.core.js: but this just disables the tooltips, and does not change the "trigger" to click ...trigger: 'click', changed from trigger: 'hover',

var defaults = {
        animation: 'fade',
        animationDuration: 350,
        content: null,
        contentAsHTML: false,
        contentCloning: false,
        debug: true,
        delay: 300,
        delayTouch: [300, 500],
        functionInit: null,
        functionBefore: null,
        functionReady: null,
        functionAfter: null,
        functionFormat: null,
        IEmin: 6,
        interactive: false,
        multiple: false,
        // must be 'body' for now, or an element positioned at (0, 0)
        // in the document, typically like the very top views of an app.
        parent: 'body',
        plugins: ['sideTip'],
        repositionOnScroll: false,
        restoration: 'none',
        selfDestruction: true,
        theme: [],
        timer: 0,
        trackerInterval: 500,
        trackOrigin: false,
        trackTooltip: false,
        trigger: 'click',
        triggerClose: {
            click: false,
            mouseleave: false,
            originClick: false,
            scroll: false,
            tap: false,
            touchleave: false
        },
        triggerOpen: {
            click: false,
            mouseenter: false,
            tap: false,
            touchstart: false
        },
        updateAnimation: 'rotate',
        zIndex: 9999999
    },

Louys Patrice Bessette · Answer 1 · 2017-03-06T17:55:57.880

BIG EDIT

(check history if you wish, I left only what is relevant for a working solution)

Okay, so first of, if you modified any of the ToolTipster plugin files, just undo all your changes or download and re-install fresh files.

That said, when I talked about "init" in the comments, I was talking about the script which instantiate the ToolTipster function... In your web page content.

As per ToolTipster's documentation, Instantiating the ToolTipster plugin to do what you want (open/close the tooltips on click/tap, not hover) is done this way, somewhere between the <body> and </body> tags:

trigger:"custom", is needed to use triggerOpen and triggerClose parameters.
It, in fact, just set all built-in trigger event listeners to false and enables the custom triggers to be set.

<script>
$(document).ready(function(){
  $('.tooltip').tooltipster({
    animation: 'fade',
    delay: 200,
    theme: 'tooltipster-punk',
    trigger:"custom",
    triggerOpen: {
      click: true,  // For mouse
      tap: true    // For touch device
    },
    triggerClose: {
      click: true,  // For mouse
      tap: true    // For touch device
    }
  });
});
</script>

Now to use it on a link

(This is optional work I've done through my attempts)

Since a link opens an href by default, may be you will want it not to...
And have the dblclick event instead to open a link.
(You will have to mention your users about this "unusual" double-click thing)
;)

I've done it all in the below snippet.
NOTE that SO is preventing tabs to open in the snippet sandbox...
It is working great in CodePen

$('#myPageTitle').tooltipster({
  animation: 'fade',
  delay: 200,
  theme: 'tooltipster-punk',
  trigger:'custom',
  content: "Welcome to my new website.",
  triggerOpen: {
    click: true,  // For mouse
    tap: true    // For touch device
  },
  triggerClose: {
    click: true,  // For mouse
    tap: true    // For touch device
    }
});

$('.coolLink').tooltipster({
  animation: 'fade',
  delay: 200,
  theme: 'tooltipster-punk',
  trigger:"custom",
  content: "This is a cool link to visit! Double-click! (not working on SO)",
  triggerOpen: {
    click: true,  // For mouse
    tap: true    // For touch device
  },
  triggerClose: {
    click: true,  // For mouse
    tap: true    // For touch device
  }
});

$('#eoi').tooltipster({
  animation: 'fade',
  delay: 200,
  theme: 'tooltipster-punk',
  trigger:"custom",
  content: "This is the End of Internet.",
  triggerOpen: {
    click: true,  // For mouse
    tap: true    // For touch device
  },
  triggerClose: {
    click: true,  // For mouse
    tap: true    // For touch device
  }
});

// Those are handler for links, since a click open an href automatically
// You can set the href open on double click (dblclick event) instead.
//
// NOTE that StackOverFlow prevents a window open in the snippet sandbox...
//      But it works. ;)
$("a.coolLink, a#eoi").click(function(e){
  e.preventDefault();
});
$("a.coolLink, a#eoi").on("dblclick",function(e){
  e.preventDefault();
  window.open($(this).attr("href"));
});

<link href="https://cdn.jsdelivr.net/jquery.tooltipster/4.2.2/css/tooltipster.bundle.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.tooltipster/4.2.2/js/tooltipster.bundle.min.js"></script>

<div style="text-align:center;">
<h1 id="myPageTitle">My Page Title</h1>
<br>
<br>
<a href="http://stackoverflow.com" target="_blank" class="coolLink">StackOverflow</a><br>
<br>
<a href="http://iamceege.github.io/tooltipster/#options" target="_blank" class="coolLink">ToolTipster options</a><br>
<br>
<br>
<a href="http://endoftheinternet.com/" target="_blank" id="eoi">End of Internet</a><br>
</div>

Be sure to include the jQuery library, the ToolTipster bundle libraries.
You can find it all here. or here

thank you. and is this the correct file to edit this in ("tooltipster.core.js") — user1426583, Feb 28 '17 at 20:01
Never edit the files of a library. This is configuration only to put in your own code, read the documentation. — Louis Ameline, Feb 28 '17 at 20:04
You have to pass these params on init of the function. Here is the documentation you should read : http://iamceege.github.io/tooltipster/#options — Louys Patrice Bessette, Feb 28 '17 at 20:09
@LouysPatriceBessette Thank you. I have read the docs. and cannot find the file which contains the init of the function. Only the library files. I have taken this project over from someone, and am unsure of their practices. Please can you advise in more detail as to where I can find the init of the function — user1426583, Mar 02 '17 at 18:05
I think I ran through the same problem as you... I was quite more difficult than it looked, since *I think* I've found a documentation glitch... Have a look. — Louys Patrice Bessette, Mar 02 '17 at 21:06
Please open an issue at Tooltipster if you think found a glitch. I'm not sure why "Now... This just don't work" because it works for me in this fiddle in Chrome at least: https://jsfiddle.net/5xqqmrt6/43/. And rather than checking opacity of the HTML, use the `status` method, it will give you the state of the tooltip. — Louis Ameline, Mar 06 '17 at 15:41
mmm... You just got me mystified! The only thing I see is that I'm using different CDNs (not the "bundle" files). Thank you! I will edit my answer. — Louys Patrice Bessette, Mar 06 '17 at 17:30

score 1 · Answer 2 · answered May 18 '20 at 18:18

1

Try this for the trigger value when initializing tooltipster:

trigger: ('ontouchstart' in window) ? 'click' : 'hover'

answered May 18 '20 at 18:18

nimi

106
6

Tooltipster not working on mobile devices - Wordpress

2 Answers2

BIG EDIT

Now to use it on a link