View Full Version : Align tooltip text

6 Apr 2010, 8:23 AM
Tooltip is centering my text by default. I can't seem to get it left-aligned.

I've tried adding a ctCls:

tooltip: {text: 'my text',
ctCls: 'tooltip'},
with this in my CSS:

.tooltip {
text-align:left !important;
I've tried styling it directly:

tooltip: {text: 'my text',
style: 'text-align:left !important;'},
I'd rather not alter the Ext CSS files. What is the proper way to go about this?

Thanks in advance,

6 Apr 2010, 8:51 AM
could not you write this style script in your specific page? not in ext original css file.

<style type="text/css">

.tooltip {
text-align:left !important;



6 Apr 2010, 9:21 AM
Yeah, when I said I added it to my CSS with the first method I tried, it was in my own CSS file I include. It didn't seem to do anything... :-/

Any other ideas?

6 Apr 2010, 9:43 AM
well, what about

Ext.getDom('yourtooltip').style.textAlign = "left" ;

6 Apr 2010, 12:05 PM
Good idea. I tried giving my tooltip an 'id' and applying the style like you said.

tooltip: {id: 'tip_filter',
text: 'my text'}

After grid is instantiated:

Ext.getDom('tip_filter').style.textAlign = "left" ;

I even tried .getCmp(), but Firebug kept reporting it couldn't find it. :-/

I found a silly workaround, though. Just stick it in a DIV and style that.

tooltip: {text: '<div style="text-align:left">my text</div>'}

Thanks for the replies!