0

ノードのマウスオーバーでツールチップを（ qtipを使用して）表示したい。内部でこれを行うために

cy.nodes().bind("mouseover", function() { ... }

ツールチップを特定のsvg要素にバインドする必要があります。これを行うためにsvg要素を返すノードのパブリックインターフェイス上に関数が見つかりません。また、初期化中に個々のノードのsvg要素に属性を直接追加する方法も見つかりません。Cyは確かにこのsvg情報をその_privateに保存しています。もちろん、node.position（）を呼び出して対応するsvg要素を検索することで、svg要素を見つけることができますが、ノードオブジェクトインターフェイスから直接取得するためのよりクリーンな方法はありますか？

編集：Atanasの提案は機能しますが、それが永続的な解決策であるかどうかはわかりません。mouseout /zoom/pan/grab/select/..でツールチップを無効にしたいのですが、これはバインドする必要があることを意味します

$(".ui-tooltip").qtip('hide');

cyのそれらのイベントに。qtipイベントとツールチップの表示の遅延に依存したいと思います。ツールチップはこれらのイベントにすぐに隠されているため、少しバグがあるように見えます。

4

2 に答える 2

2

Cytoscape.JSは最近、パフォーマンス上の理由からHTML5Canvasレンダラーを使用するように更新されました。（これはおよそ2012年8月から9月に発生しました）

現在のベータ版では、ノードホバリングのイベント位置の取得は完全には実装されていませんが、非常に重要な機能のようです。

Javascriptコンソールで次のように入力すると、実装のステータスを確認できます。

cy.nodes().bind("mouseover", function(e) {console.log(e)})

この機能はすぐに実装されるはずです。

于 2012-11-01T21:58:35.830 に答える
0

私は最近、多かれ少なかれ同じことをしました-ノードにqtipsを表示します-そしてそれは機能します。これが私のコードです、それが役立つことを願っています：

    cy.nodes().bind("mouseover", function(oEvent){
        var eid = this.data("id");

        $qtipDiv.css({
            "left": oEvent.clientX,
            "top": oEvent.clientY,
        });

        var menutext = "some text to be shown in tooltip";

        $qtipDiv.qtip({
            content: {
                text: menutext
            },
            show: {
                delay: 0,
                event: false,
                ready: true,
                effect: false
            },
            position: {
                viewport: true,
                adjust: {
                    method: "shift"
                }
            },
            style: {
                classes: "ui-tooltip-tipsy"
            }
        });
    });
于 2012-07-03T09:53:05.000 に答える