Tooltip styling not being applied

[glafrance]

Hi everyone!

I have this Image definition, and it defines a tooltip, but the CSS is not being applied to the tooltip, even if I set the CSS selector to .x-tip or .x-tip-default or .x-tip-body or .x-tip-body-default. None of these selectors apply the CSS.

Please help, and thanks! :)


{
xtype: 'image',
id: 'searchBrandIcon',
height: 20,
width: 20,
margin: '0 0 0 3',
bodyStyle: {
background: '#0000FF'
},
src: "OMPortal/resources/images/blueSearch.png",
listeners : {
afterrender: {
single: true,
fn: function () {
this.tip = Ext.create('Ext.tip.ToolTip', {
target: this.getEl(),
html: me.xBrandSearch,
title: ''
});
}
}
}
}

.x-tip-body-default {
background-color: #ffff99;
border: none;
color: #333333;
font-size: 11px;
@include border-radius(0.2em);
padding: 4px 5px 4px 6px;
}

[sword-it]

Hi Glafrance,

Override the x-tip class, like-



.x-tip {
background-color: #ffff99 !important;
border: none;
color: #333333 !important;
font-size: 11px !important;
@include border-radius(0.2em);
padding: 4px 5px 4px 6px !important;
}