jquery - 工具提示在移动设备上不起作用-Wordpress

加载Tooltipster jquery插件以触发“悬停时”状态的工具提示。

在移动设备上时，“悬停”触发器不会加载-因此，我想在移动设备上将触发器更改为“点击”。

我已经在tooltipster.core.js中尝试了以下编辑：
但这只会禁用工具提示，并且不会更改“触发”以单击
...触发：“点击”，已更改为触发：“悬停”，

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
    },

最佳答案

大编辑

（如果需要，请查看历史记录，我只留下了与有效解决方案相关的内容）

好的，首先，如果您修改了任何ToolTipster插件文件，只需撤消所有更改或下载并重新安装新文件即可。

就是说，当我在评论中谈论“ init”时，我是在谈论实例化ToolTipster函数的脚本...在您的网页内容中。

根据ToolTipster的文档，Instantiating ToolTipster插件可以在<body>和</body>标记之间的某个位置完成您想要做的事情（单击/点击时打开/关闭工具提示，而不是悬停）：

使用trigger:"custom",和triggerOpen参数需要triggerClose。
实际上，它只是将所有内置的触发器事件侦听器设置为false并启用自定义触发器。

<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>

现在在链接上使用它

（这是我通过尝试完成的可选工作）

由于默认情况下链接会打开href，因此您可能希望它不...
并使用dblclick事件代替打开链接。
（您将不得不向用户提及此“异常”双击事件）
;）

我已经在下面的代码段中完成了所有操作。
请注意，SO会阻止在摘要沙箱中打开标签页...
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>

确保包括jQuery库，ToolTipster捆绑库。
您可以全部找到here。或here

关于jquery - 工具提示在移动设备上不起作用-Wordpress，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42517300/