我一直在寻找很长一段时间,似乎无法找到一个利用以下内容的jQuery工具提示插件:
onClick(而不是悬停,使其像切换按钮一样工作)
淡入淡出
使用工具提示的想法是,我有一些链接,我想显示内容.虽然正常的工具提示(这可能是我出错的地方..)是悬停,它需要是一个通过点击切换的链接触发它.
有没有比使用工具提示更好的想法?
解决方法
我不知道你是怎么看的,但快速谷歌搜索
jquery工具提示给了我
http://flowplayer.org/tools/tooltip/index.html(现在已经使用他们的可滚动插件一段时间了,真的很喜欢:)
http://flowplayer.org/tools/tooltip/index.html(现在已经使用他们的可滚动插件一段时间了,真的很喜欢:)
来自他们的网站:
jQuery Tooltip allows you to fully control when the tooltip will be
shown or hidden. You can specify different events for different types
of elements. You can control this behavIoUr with the events
configuration variable which has following values by default:
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 }
使用’click’应该可以解决问题. (我没有测试过)
但是,如果所有其他方法都失败了,你仍然可以使用’scripting 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(); });
但我建议您按照user834754的建议查看qTip,您可能会更喜欢它.