Qtip在悬停时显示页面底部的文本

Question

当我将鼠标悬停在按钮上时，我正在使用Qtip做显示文字。这是我的代码/函数使用qtip：

$('a.helpTip').qtip({
    name: 'dark',
    tip: true,
    position: {
        corner: {
            tooltip: 'topLeft',
            target: 'rightBottom'
        }
    },
    style: {
        width: 400,
        padding: 5,
        background: '#cfdfff',
        color: 'black',
        textAlign: 'left',
        border: {
            width: 2,
            radius: 4,
            color: '#5271b0'
        }
    }
});

每当我将鼠标悬停在帮助按钮上时，文字都会显示在页面底部，原因如上图所示。当我检查代码时，这就是我所看到的：

<div id="qtip-6" class="qtip qtip-default  qtip-pos-tl" tracking="false" role="alert" aria-live="polite" aria-atomic="false" aria-describedby="qtip-6-content" aria-hidden="true" data-qtip-id="6" style="width: 400px; z-index: 15001;"><div class="qtip-content" id="qtip-6-content" aria-atomic="true">This is my Help Text, it will be longer than it was to see what happens if it has to wrap around.</div></div>

有人知道如何解决这个问题或为什么会发生这种情况？