工具提示(qTip)未关闭,jQuery

发布于 2024-10-07 04:21:42 字数 1535 浏览 7 评论 0原文

使用以下代码 qTip 对我有用并生成工具提示:

$('a.ppname[rel]').live('mouseover', function() {
    $(this).qtip( {
     content : {
      url : $(this).attr('rel')
     },
     position : {
      corner : {
       tooltip : 'leftBottom',
       target : 'rightBottom'
      }
     },
     style : {
      border : {
       width : 5,
       radius : 10
      },
      padding : 10,
      textAlign : 'center',
      tip : true, // Give it a speech bubble tip with
      // automatic corner detection
      name : 'cream' // Style it according to the preset
     // 'cream' style
     }

    });
  });
 });

但是 qTip 并未从 dom 中删除,有时它会消失并再次出现,我会得到很多打开的工具提示:

alt text

我查看了 dom, qtip 似乎没有被删除,只是设置为不可见。我需要一些简单的逻辑来销毁工具提示。例如,如果 a.ppname 获得焦点并且不再获得焦点,我可以销毁它。但是在 javascript 中会是什么样子呢?有什么想法吗?

更新:我将 jQuery 降级至 1.3.2 推荐用于 qTip。我不再获得保持打开状态的工具提示,但现在还有另一个问题:

alt text

工具提示,目前我当我将鼠标悬停在下一个项目上时,似乎无法删除。请提供一些如何销毁工具提示的建议。

更新

$('a.ppname[rel]').each(function(){

在代码的第一行中使用问题已解决。但这导致了另一个问题,我在这里描述的另一个问题 qTip 工具提示不出现,jQuery< /a>.看来是个两难的问题^:D

with following code qTip works for me and generates tooltips:

$('a.ppname[rel]').live('mouseover', function() {
    $(this).qtip( {
     content : {
      url : $(this).attr('rel')
     },
     position : {
      corner : {
       tooltip : 'leftBottom',
       target : 'rightBottom'
      }
     },
     style : {
      border : {
       width : 5,
       radius : 10
      },
      padding : 10,
      textAlign : 'center',
      tip : true, // Give it a speech bubble tip with
      // automatic corner detection
      name : 'cream' // Style it according to the preset
     // 'cream' style
     }

    });
  });
 });

But the qTip is not removed from the dom, well sometimes it just disappears and appears again and I get a lot of opened tooltips:

alt text

I looked at the dom, the qtip seems not to be removed but just set invisible. I need some simple logic to destroy the tooltip. E.g. if a.ppname was focused and is not focused any more I could destroy it. But how would that look like in javascript? Any Ideas?

Update: I downgraded my jQuery to 1.3.2 recommended for qTip. I don't get tooltips that stay open anymore but there is another problem now:

alt text

The tooltips, which for now I can not delete seem to appear when I hover the next item. Please, provide some suggestions how to destroy the tooltip.

Update: using

$('a.ppname[rel]').each(function(){

in the first line of the code the problem is solved. But that leads to another problem another problem that I describe here qTip tooltip does not appear, jQuery. seems to be a dilemma^:D

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

谁的新欢旧爱 2024-10-14 04:21:42

我想你想要的是

$('a.ppname[rel]').qtip({
   content : {stuff},
   style : {stuff},
   position: {stuff},
   show: 'mouseover',
   hide: 'mouseout'
})

I think what you want is

$('a.ppname[rel]').qtip({
   content : {stuff},
   style : {stuff},
   position: {stuff},
   show: 'mouseover',
   hide: 'mouseout'
})
弥枳 2024-10-14 04:21:42

当工具提示隐藏时,您可以通过调用 destroy 方法从 DOM 中删除工具提示。试试这个(感谢马特,我复制并修改了他的例子):

$('a.ppname[rel]').qtip({
   content : {stuff},
   style : {stuff},
   position: {stuff},
   show: 'mouseover',
   hide: 'mouseout',
   onHide: function() { $(this).qtip('destroy'); }
});

You can remove the tooltip from the DOM by calling the destroy method when the tooltip is hidden. Try this (kudos to Matt for his example that I copied and ammended):

$('a.ppname[rel]').qtip({
   content : {stuff},
   style : {stuff},
   position: {stuff},
   show: 'mouseover',
   hide: 'mouseout',
   onHide: function() { $(this).qtip('destroy'); }
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文