Javascript 获得；node.popperRef不是一个函数；当尝试将popper和tippy与cytoscape一起使用以创建工具提示时_Javascript_Cytoscape.js_Popper.js

Javascript 获得；node.popperRef不是一个函数；当尝试将popper和tippy与cytoscape一起使用以创建工具提示时

javascript

Javascript 获得；node.popperRef不是一个函数；当尝试将popper和tippy与cytoscape一起使用以创建工具提示时,javascript,cytoscape.js,popper.js,Javascript,Cytoscape.js,Popper.js,在尝试实现类似的功能时，单击节点时显示工具提示，我尝试在上修改演示但我一直收到错误消息：“node.popperRef不是函数” 我的HTML： <!DOCTYPE html> <html> <head> <title>学习Cytoscape.js和neo4j</title> <link href="/static/css/style.css" rel="stylesheet&quo

在尝试实现类似的功能时，单击节点时显示工具提示，我尝试在上修改演示

但我一直收到错误消息：“node.popperRef不是函数”

我的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>学习Cytoscape.js和neo4j</title>
    <link href="/static/css/style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    
    <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
    <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@2.0.0/cytoscape-popper.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.18.2/cytoscape.min.js" integrity="sha512-CBGCXtszkG5rYlQSTNUzk54/731Kz28WPk2uT1GCPCqgfVRJ2v514vzzf16HuGX9WVtE7JLqRuAERNAzFZ9Hpw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.18.2/cytoscape.umd.js" integrity="sha512-Sj2IibbEYxNWMtZ7mxdAplO062HJ2oe2/be8VCvIfZofl1iXsqH+9lwIf60jm/PKAFs/+fDsVUPtZuH86Kx1qg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.18.2/cytoscape.umd.min.js" integrity="sha512-WaLQ3SSNa6TgZwE7M2y4xKorsywIDHKQQz0swoF2dun2sFYkMrajr4M4anuw69n6mUPMPQdivAxtcf0kXgfsow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="/static/js/code.js"></script>
</head>
<body>
    <div>
        <button data-tippy-content="Tooltip">Text</button>
        <button data-tippy-content="Another Tooltip">Text</button>
    </div>
        <div id="cy"></div>
</body>
</html>

}))

ps：在js中，$.get（'/graph'，function（result）{}，'/graph'的结果是来自python flask的jsonify，包含来自neo4j服务器的节点和边缘数据，该服务器应该用于cytoscape的构造函数。

我认为在HTML代码中导入脚本有问题。它们看起来非常奇怪。请尝试下面的内容

<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/cytoscape-popper/cytoscape-popper.js"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

我通过使用popper1.14.7和tippy5而不是更新版本解决了我的问题。以下是我的新HTML：

<!DOCTYPE html>
<html>
<head>
    <title>学习Cytoscape.js和neo4j</title>
    <link href="/static/css/style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
    <script src="https://unpkg.com/popper.js@1.14.7/dist/umd/popper.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.5/cytoscape-popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>

    <script src="/static/js/code.js"></script>

</head>
<body>
    <div id="cy"></div>
</body>
</html>


学习Cytoscape.js和neo4j

前两个导入脚本返回404错误，这就是我以这种方式编写HTML的原因。但我自己解决问题的方法是使用popper1.14.7和tippy5，而不是使用较新版本。

<!DOCTYPE html>
<html>
<head>
    <title>学习Cytoscape.js和neo4j</title>
    <link href="/static/css/style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
    <script src="https://unpkg.com/popper.js@1.14.7/dist/umd/popper.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.5/cytoscape-popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>

    <script src="/static/js/code.js"></script>

</head>
<body>
    <div id="cy"></div>
</body>
</html>