qtip не показывает всплывающую подсказку в правильном положении вcytoscape.js

Я пытаюсь показать всплывающие подсказки в событии наведения мыши в cytoscape.js с помощью qtip. Подсказка отображается, когда указатель мыши находится над узлом на графике, однако она располагается в верхнем левом углу графика, а не внизу узла. Вот код для отображения графика:

this.cyto = cytoscape({
    container: document.getElementById("graph"),
    layout: {
        name: 'spread',
        minDist: 200
      },
    elements: this.graph.elements,
    style: this.cy_style
});

Добавьте вот код, который я использую для добавления qtip

this.cyto.nodes().forEach(function (element) {
    var nodeName = element.data("name");
    if (nodeName) {
        element.qtip({
            content: {
                text: nodeName
            },
            position: {
                my: 'bottom center',
                at: 'bottom center',
                adjust: {
                    y: 50,
                    mouse: false
                }
            },
            show: {
                event: 'mouseover'
            },
            hide: {
                event: 'click mouseout'
            },
            style: {
                classes: 'qtip-bootstrap'
            }
        });
    }
});

Вот скриншот, показывающий, как в настоящее время отображается всплывающая подсказка:

Как вы можете видеть на изображении выше, всплывающая подсказка отображается в верхнем левом углу графика. Однако я хочу отобразить всплывающую подсказку следующим образом:

Как сделать так, чтобы всплывающая подсказка отображалась в нужном месте? Что я здесь делаю неправильно?