如何将工具提示 JavaScript 库（qtip.js）与 cytoscape.js 一起使用答案

【问题标题】：How to use tooltip javascript library(qtip.js) together with cytoscape.js如何将工具提示 JavaScript 库（qtip.js）与 cytoscape.js 一起使用
【发布时间】：2017-01-01 03:29:21
【问题描述】：

我想将qtip 与 cytoscape.js 一起使用，以在使用 cytoscape.js 创建的图形中鼠标悬停事件的节点中显示工具提示。我已将以下代码放入 ready: function() 中，如下所示：

      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); 

    });

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

【问题讨论】：

你不能。 cystoscape 使用画布，qtip 需要一个节点来附加自己。
请查看您类似问题的答案：stackoverflow.com/questions/20993149/…
我已经尝试使用 cy.on() 方法来绑定事件，如上面的代码所示，但它不起作用。请帮忙。
您不能在 cy.js 元素上调用 qtip，并且您正在用 jQuery 包装 cy.js 元素——这将永远无法工作。如果您按照其他问题中的说明进行操作，您将能够使事情正常进行：stackoverflow.com/questions/20993149/…
嗨@maxkfranz，我已按照post 中的说明进行操作。如果您可以显示一些示例代码来执行此操作，那就很清楚了。请帮忙。

标签： jquery qtip cytoscape.js cytoscape-web

【解决方案1】：

为 qtip 提供正确的坐标以与节点悬停交互。可以通过 cyPosition 完成希望这会有所帮助：

                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。

【讨论】：

你能指定id为box的元素吗？工具提示应该出现在选定的节点上。如何获取所选节点的 ID？
"box" 是工具提示 div。像这样
将它放在您的 cytoscape 容器中。在悬停时，您将在工具提示上获得节点的 ID/名称。通过我的代码，它会为您提供工具提示名称。只需 console.log(target) 自己弄清楚
这是显示提示，但位置不正确。它在节点下方约 400 像素处，如果我通过用鼠标移动图形来移动图形，那么情况会更糟。坐标 x 和 y 未与提示坐标对齐。

【解决方案2】：

这是我今天找到的最佳解决方案。只需在你的ready函数中包含这段代码，除了qtip函数和css之外，还包括https://github.com/cytoscape/cytoscape.js-qtip，它会在节点或边缘被点击时显示提示

    cy.elements().qtip({
                content: function(){ return 'Example qTip on ele ' + this.id() },
                position: {
                    my: 'top center',
                    at: 'bottom center'
                },
                style: {
                    classes: 'qtip-bootstrap',
                    tip: {
                        width: 16,
                        height: 8
                    }
                }
            });
            // call on core
            cy.qtip({
                content: 'Example qTip on core bg',
                position: {
                    my: 'top center',
                    at: 'bottom center'
                },
                show: {
                    cyBgOnly: true
                },
                style: {
                    classes: 'qtip-bootstrap',
                    tip: {
                        width: 16,
                        height: 8
                    }
                }
            });

【讨论】：