Tooltipster 无法在移动设备上运行 - Wordpress

Posted 2023-05-07

技术标签:

【中文标题】Tooltipster 无法在移动设备上运行 - Wordpress【英文标题】：Tooltipster not working on mobile devices - Wordpress 【发布时间】：2017-07-19 22:17:18 【问题描述】：

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
    ,

【问题讨论】：

【参考方案1】：

大编辑

（如果您愿意，请查看历史记录，我只留下了与工作解决方案相关的内容）

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

也就是说，当我在 cmets 中谈到 "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 事件来打开链接。（您必须向用户提及这个“不寻常的”双击事件） ;)

我已经在下面的 sn-p 中完成了所有操作。注意 SO 会阻止标签在 sn-p 沙箱中打开...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 *** 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://***.com" target="_blank" class="coolLink">***</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 bundle 库。你可以找到这一切here。或here

【讨论】：

谢谢。这是在（“tooltipster.core.js”）中编辑的正确文件吗永远不要编辑库的文件。这只是为了放入您自己的代码的配置，请阅读文档。我想我遇到了和你一样的问题...我比看起来要困难得多，因为我认为我发现了一个文档故障...看看吧。如果您认为发现了故障，请在 Tooltipster 上打开一个问题。我不确定为什么“现在......这不起作用”，因为它至少在 Chrome 的这个小提琴中对我有用：jsfiddle.net/5xqqmrt6/43。而不是检查 HTML 的不透明度，而是使用 status 方法，它会为您提供工具提示的状态。嗯...你让我迷惑了！我唯一看到的是我正在使用不同的 CDN（不是“捆绑”文件）。谢谢！我将编辑我的答案。【参考方案2】：

在初始化 tooltipster 时试试这个 trigger 值：

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

【讨论】：

以上是关于Tooltipster 无法在移动设备上运行 - Wordpress的主要内容，如果未能解决你的问题，请参考以下文章

Tooltipster .tooltipster('open') 抛出错误。

ReactJS 应用程序无法在移动设备上运行

jQuery slideUp 无法在移动设备上运行

地理位置无法在移动设备上运行，但可以在我的桌面上运行

Fancybox 打开 pdf 无法在移动设备上运行？

Javascript (Vue.js) 无法在移动设备和其他连接的设备中运行，但它可以在运行 localhost 的桌面上运行