微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery工具提示onClick?

我一直在寻找很长一段时间,似乎无法找到一个利用以下内容的jQuery工具提示插件

onClick(而不是悬停,使其像切换按钮一样工作)
淡入淡出

使用工具提示的想法是,我有一些链接,我想显示内容.虽然正常的工具提示(这可能是我出错的地方..)是悬停,它需要是一个通过点击切换的链接触发它.

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

解决方法

我不知道你是怎么看的,但快速谷歌搜索 jquery工具提示给了我
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,您可能会更喜欢它.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐