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

2
votes

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

2
extjstooltipextjs5

2 Answers

1
votes

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

0
votes

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