jQuery工具提示onClick？

我一直在寻找了很久，似乎无法找到一个jQuery插件提示，利用以下几点：jQuery工具提示onClick？

onClick（相反hover，使得它像一个切换按钮工作）
淡入/淡出

使用工具提示的想法是，我有几个链接，我想显示内容英寸而正常的工具提示（这可能是我错了..）是为了悬停，它需要是一个通过点击触发它的链接来切换。

有没有比使用工具提示更好的想法？

来源

2011-10-29 Charlie

为什么会这样被否决？这是一个合理的问题，需要澄清以下问题。 – Charlie

我不知道该怎么你一直在寻找但快速谷歌搜索jQuery的工具提示给我 http://flowplayer.org/tools/tooltip/index.html（在使用他们的滚动插件有一段时间了，真的很喜欢它:)

从他们的网站：

jQuery Tooltip允许您完全控制何时显示或隐藏工具提示。您可以为元素的不同类型指定不同的事件。您可以控制此行为与事件配置变量已经默认以下值：

events: { 
    def:  "mouseenter,mouseleave", // default show/hide events for an element 
    input: "focus,blur",    // for all input elements 
    widget: "focus mouseenter,blur mouseleave", // select, checkbox, radio, button 
    tooltip: "mouseenter,mouseleave"  // the tooltip element 
}

使用“点击”应该做的伎俩。（我没有测试）

然而，如果一切都失败了，你仍然可以伪造它通过使用“脚本API”，只是调用.show（）和.hide（）

编辑：

由于点击，点击没有完全按照我的想法工作，我提供了一种解决方法。我真的希望有一个更好的方法来达到同样的结果。我使用本地副本http://flowplayer.org/tools/tooltip/index.html对其进行了测试，并且按预期工作。

var tooltip = $("#dyna img[title]").tooltip({ 
    events: { 
     def:  ",", // default show/hide events for an element 
     tooltip: "click,mouseleave"  // the tooltip element 
    }, 
    // tweak the position 
    offset: [10, 2], 
    // use the "slide" effect 
    effect: 'slide' 
// add dynamic plugin with optional configuration for bottom edge 
}).dynamic({ bottom: { direction: 'down', bounce: true } }); 

tooltip.click(function() { 
    var tip = $(this).data("tooltip"); 
    if (tip.isShown(true)) 
     tip.hide(); 
    else 
     tip.show(); 
});

但我建议你看看qTip通过user834754的建议为好，你可能会喜欢它了。

来源

2011-10-29 21:59:17 Brunner

我看过这个，我唯一不喜欢的就是使用图像，因为我想使用CSS作为工具提示。 – Charlie

我也使用这个工具，你可以使用纯CSS的工具提示，更彻底地阅读文档。 – Kyle

这个问题的主要问题是，没有办法让工具提示切换。使用'click'，点击''events：'不起作用。 – Charlie

ü可以尝试使用qTip，U可以在任何jQuery的事件就可以了绑定：

show: { when: { event: 'click' } }

一个简单而漂亮的插件:) http://craigsworks.com/projects/qtip/docs/reference/#show

来源

2011-10-29 23:10:09 shennyL

请注意，这是版本1.对于版本2，现在将显示：{event：'click'}（http://craigsworks.com/projects/qtip2/docs/show/#target） –

，如果你喜欢简单，轻便的提示，你可以考虑http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/然后只需将onclick jquery事件绑定到它。

来源

2012-07-19 23:59:33

可以在点击事件中打开jQuery UI工具提示（jQuery UI版本1.10.2）。将标题属性添加到要在其上显示工具提示的元素以外的元素。

<span id="helpbutton" title="This is tooltip text">Help</span> <!-- tootltip would be displayed on click on this --> 
<input id="inputbox"></input> <!-- help to be displayed for this element -->

初始化具有标题属性且位置设置为目标元素的元素的工具提示。

$("#helpbutton").tooltip({position: {of: "#inputbox", at: "right"}});

呼叫在目标元素上的点击事件的回调函数的工具提示打开。

$("helpbutton").click(function() { 
    $("#helpbutton").tooltip("open"); 
});

来源：Floating help box with jQuery UI tooltip

来源

2013-05-13 16:14:04 Gaurav

你也可以这样做：

$("#myTooltip").tooltip().off("mouseover").on("click", function() { 
    if ($(this).attr("visible") === "1") { 
    $(this).attr("visible", "0"); 
    return $(this).tooltip("close"); 
    } else { 
    $(this).attr("visible", "1"); 
    return $(this).tooltip("open"); 
    } 
}).on("mouseleave", function(event) { 
    return event.stopImmediatePropagation(); 
});

来源

2014-03-10 19:19:03 aruanoc

它对我有用。我花了一些时间在这个问题上，并stopImmediatePropagation（）方法保存我的一天！ – harijari

jQuery工具提示onClick？

回答

相关问题