cytoscape.js-qtip：show.delay 不工作

Question

我在节点上使用 cytoscape.js-qtip 进行鼠标悬停，但我想指定 show.delay 选项。它似乎没有用——工具提示仍然会立即出现。为了在尽可能简单的情况下对此进行测试，我尝试修改 cytoscape.js-qtip 附带的标准 demo.html，以便工具提示 1) 仅在节点上，2) 触发通过添加显示和隐藏选项，在鼠标悬停时而不是点击时，以及 3) 具有 3 秒的延迟选项。我让其他一切保持不变。工具提示仍然会立即出现。当我使用 api 检查 show.delay 的值时，它被设置为 3000，正如预期的那样。这个功能是不是不能用这个包装器工作，还是我做错了什么？这是演示代码的更改部分：

            cy.nodes().qtip({
                content: function(){ return 'Example qTip on ele ' + this.id() },
                position: {
                    my: 'top center',
                    at: 'bottom center'
                },
                show: { event: 'mouseover',
                        delay: 3000
                },
                hide: { event: 'mouseout'
                },
                style: {
                    classes: 'qtip-bootstrap',
                    tip: {
                        width: 16,
                        height: 8
                    }
                }
            });

Answer 1

我认为这不会开箱即用，因为扩展必须绕过 Qtip 事件系统并绕过它才能在（非 HTMLDomElement）图形元素上工作。

Github 问题：https://github.com/cytoscape/cytoscape.js-qtip/issues/6

Answer 2

在通过电子邮件与 Max 讨论后，他建议我生成自己的自定义事件，并在这方面给了我一些帮助。以下工作生成一个 qtip，需要节点和边缘都悬停 1s：

var hoverTimeout;
var hoverDelay = 1000; // 1sec
var hoverElt = cy.collection(); // empty set so no null checks needed

cy.on('mouseover', 'node', function(evt){
 hoverElt = this;
 clearTimeout( hoverTimeout );  
 hoverTimeout = setTimeout(function(){hoverElt.trigger('hover');},
                                  hoverDelay);
    })
  .on('mouseover', 'edge', function(evt){
 hoverElt = this;
 var container = cy.container();
 // Edges don't have their own position, so in order for an edge qtip
 // to come up near the edge (actually, near the mouse event), we have 
 // to adjust its position manually.
 var api = hoverElt.qtip('api');
 api.set('position.adjust.x', 
            evt.cyRenderedPosition.x + container.offsetLeft);
 api.set('position.adjust.y', 
            evt.cyRenderedPosition.y + container.offsetTop);
 clearTimeout( hoverTimeout );  
 hoverTimeout = setTimeout(function(){hoverElt.trigger('hover');},
                                  hoverDelay);
    })
  .on('mouseout', 'node,edge', function(){
 clearTimeout( hoverTimeout );
 hoverElt.trigger('hovercancel');
    });

cy.elements().qtip({
 content: 'This is a tooltip',
 show: { event: 'hover'}, 
 hide: { event: 'hovercancel' },
    });

cytoscape.js-qtip：show.delay 不工作

cytoscape.js-qtip: show.delay not working

cytoscape.js