Tooltipster 不適用於移動設備 - Wordpress

Question

加載工具提示 jquery 插件以觸發工具提示“懸停”狀態。

在移動設備上時，“懸停”觸發器不會加載 - 因此，我想在移動設備上將觸發器更改為“單擊”。

我在 tooltipster.core.js 中嘗試了以下編輯：但這只是禁用了工具提示，並且不會將“觸發器”更改為單擊 ...觸發器：'click'，從觸發器更改為：'懸停'，

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

Answer 1

大編輯

（如果您願意，請檢查歷史記錄，我只留下與工作解決方案相關的內容）

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

也就是說，當我在評論中談論“init”時，我談論的是實例化 ToolTipster 函數的腳本......在您的網頁內容中。

根據 ToolTipster 的文檔，實例化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 正在阻止選項卡在代碼段沙箱中打開...
它在 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捆綁庫。
你可以在這里找到這一切。 或在這里

Answer 2

在初始化 tooltipster 時嘗試這個trigger值：

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

Tooltipster 不適用於移動設備 - Wordpress

問題描述

2 個解決方案

解決方案1
6 2017-02-28 20:00:37

大編輯

現在在鏈接上使用它

解決方案2
0 2020-05-18 18:18:59

Tooltipster 不適用於移動設備 - Wordpress

問題描述

2 個解決方案

解決方案1 6 2017-02-28 20:00:37

大編輯

現在在鏈接上使用它

解決方案2 0 2020-05-18 18:18:59

解決方案1
6 2017-02-28 20:00:37

解決方案2
0 2020-05-18 18:18:59