use*_*583 2 wordpress jquery tooltipster
加载工具提示 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
},
（如果您愿意，请检查历史记录，我只留下与工作解决方案相关的内容）
好的，首先，如果您修改了任何 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 中运行良好
<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>
$('#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"));
});确保包含 jQuery 库、ToolTipster捆绑库。
你可以在这里找到这一切。或在这里