Как использовать библиотеку javascript всплывающих подсказок (qtip.js) вместе сcytoscape.js

Я хочу использовать qtip вместе с Cytoscape.js для отображения всплывающих подсказок в узлах при наведении курсора на графике, созданном с помощью цитоскейп.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); 

    });

Но в узле при наведении курсора всплывающая подсказка не отображается. Пожалуйста, помогите мне.


jquery cytoscape.js cytoscape-web qtip
person hp36    schedule 09.01.2014    source источник
comment
Вы не можете. cytoscape использует холст, а qtip нуждается в узле для присоединения.   -  person Layke    schedule 09.01.2014
comment
См. ответ на аналогичный вопрос: stackoverflow.com/questions/20993149/   -  person maxkfranz    schedule 09.01.2014
comment
Я попытался использовать метод cy.on() для привязки события, как показано в приведенном выше коде, но он не работает. Пожалуйста помоги.   -  person hp36    schedule 10.01.2014
comment
Вы не можете вызывать qtip для элемента cy.js, и вы оборачиваете элементы cy.js с помощью jQuery, что никогда не сработает. Если вы будете следовать инструкциям в своем другом вопросе, вы сможете заставить все работать: stackoverflow.com/questions/20993149/   -  person maxkfranz    schedule 14.01.2014
comment
Привет @maxkfranz, я следовал инструкциям в этом опубликовать. Было бы ясно, если бы вы могли показать пример кода для этого. Пожалуйста помоги.   -  person hp36    schedule 16.01.2014

Ответы (2)


arrow_upward
0
arrow_downward

Укажите правильную координату для 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 при работе с холстом.

person nyxem1    schedule 04.05.2014
comment
Не могли бы вы указать элемент с идентификатором box? Подсказка должна появиться на выбранном узле. Как я получу идентификатор выбранного узла? - person hp36; 05.05.2014
comment
box - это всплывающая подсказка div. Поместите его в контейнер для цитоскейпа следующим образом: ‹div id=container›‹div id=box›‹/div›‹/div›. И при наведении вы получите идентификатор/имя узла во всплывающей подсказке. По моему коду это даст вам имя всплывающей подсказки. Просто console.log(target), чтобы понять это самостоятельно - person nyxem1; 05.05.2014
comment
Это показывает подсказки, но не в правильном положении. Это примерно на 400 пикселей ниже узла, и если я сдвину свой график, перемещая его мышью, это будет хуже. Координаты x и y не совпадают с координатами наконечников. - person emir; 31.12.2016

arrow_upward
0
arrow_downward

Вот лучшее решение, которое я нашел сегодня. Просто включите этот код в свою готовую функцию и, помимо функций 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
                    }
                }
            });
person emir    schedule 31.12.2016