如何将Tooltip javascript库(qtip.js)与cytoscape.js一起使用 [英] How to use tooltip javascript library(qtip.js) together with cytoscape.js

问题描述

我想使用 qtip 和cytoscape.js一起在鼠标悬停事件中在节点上分发工具提示用cytoscape.js创建的图形.我将以下代码放置在ready:function()中，如下所示:

I want to use qtip together with cytoscape.js to dispaly tooltips in nodes on mouseover event in graph created with cytoscape.js. I have placed following code inside ready: function() as shown below:

      cy.on('mouseover','node',function (event) {

        var eid = $(this).data('id');

        $(this).qtip({
            overwrite: false,
            content: eid,
            position: {
                my: 'right center',
                at: 'left center',
                target: $(this)
            },
            show: {
                event: event.type,
                ready: true
            },
            hide: {
                fixed: true
            }
        }, event); 

    });

但是，鼠标悬停事件上的节点上没有显示工具提示.请帮助我.

But, there is no tooltip displaying in node on mouseover event.. Please help me.

推荐答案

为qtip提供正确的坐标以与节点悬停进行交互.可以使用cyPosition做到这一点，希望对您有所帮助:

Provide the correct coordinate to qtip to interact with node hovering. It can be done with cyPosition Hope this helps:

                cy.on('mousemove','node', function(event){
                var target = event.cyTarget;
                var sourceName = target.data("source");
                var targetName = target.data("target");

                var x=event.cyPosition.x;
                var y=event.cyPosition.y;                 


                        $("#box").qtip({
                            content: {
                                title:targetName,
                                text: sourceName
                            },
                            show: {
                                delay: 0,
                                event: false,
                                ready: true,
                                effect:false

                            },
                            position: {
                                my: 'bottom center',
                                at: 'top center',

                                target: [x+3, y+3],
                                adjust: {
                                    x: 7,
                                    y:7

                                }

                            },
                            hide: {
                                fixed: true,
                                event: false,
                                inactive: 2000

                            },


                            style: {
                                classes: 'ui-tooltip-shadow ui-tooltip-youtube',

                                tip:
                                {
                                    corner: true,
                                    width: 24,         // resize the caret
                                    height: 24         // resize the caret
                                }

                            }

                    }
                });
            })

您也没有指定事件目标.并且不要忘了在处理画布时使用mousemove.

also you are not specifying event target. And don't forget to use mousemove while dealing with canvas.

这篇关于如何将Tooltip javascript库(qtip.js)与cytoscape.js一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！