CODEWITHSUNDEEP
javascriptjqueryhtmlcssqtip
overduekey
overduekey

Reputation: 51

Qtip shows text at bottom of the page when hovered over

I am currently using Qtip do display text when I hover over a button. And here's my code/function that's using 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'
        }
    }
});

enter image description here

Whenever I hover over the help button, the text will show up at the bottom of the page for some reason like in the photo above. When I inspect the code this is what I see:

<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>

Does anybody know how to fix this or why this is happening?

Upvotes: 3

Views: 297

Answers (0)

Related Questions