zeke
zeke

Reputation: 3663

ExtJS 5 - Specifying the position for a button's tooltip

I'm using ExtJS 5 and am having some issues with tooltip positioning. Specifically, when I have a button in the bottom right corner of the page, the tooltip covers the entire button itself.

I've tried using the anchorTo property but it doesn't seem to affect anything. Trying to figure out how I can position the tooltip above the button instead of right on top of it. I'm sure there's an easy solution - any help would be greatly appreciated. Thanks.

See fiddle here: https://fiddle.sencha.com/#fiddle/j94

Upvotes: 2

Views: 2065

Answers (2)

mooreinc
mooreinc

Reputation: 11

I was able to get it to work by inspecting the inner workings for the tooltip mechanism and adding a 'mouseOffset' array:

tooltip: {
            text: 'tooltip positioned on top of button',
            mouseOffset: [0,-60]
         }

Upvotes: 0

Yellen
Yellen

Reputation: 1780

You can try by adding this attribute -

tooltipType: 'title'

here..

bbar: {
                items: ['->', {
                    text: 'My Button',
                    tooltip: 'tooltip positioned on top of button',
                    tooltipType: 'title'
                }]
            }

Here's what it says in the doc - http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.button.Button-cfg-tooltipType

qtip will work if you've more space below the button, in your fiddle there is no space available to draw your qtip over the button. You can check it by changing the layout to form -

layout: 'form'

or by adding padding as

padding: '20 20 20 20',

to your fit layout

Upvotes: 1

Related Questions