remove arrow from extjs tooltip, - tooltip

Question

I want to remove this triangle from panel, it comes while showing tooltip using extjs3.
CODE SNIPPET
var tooltipHide = new Ext.ToolTip({
anchor: 'bottom',
target: 'summaryButton',
anchorOffset: 0, // center the anchor on the tooltip
width: 300,
mouseOffset: [0, 25],
autoHide: false,
closable: false,
autoScroll: true,
html: '<div style="overflow:hidden;height:480px;width:300px;">' +
mycaseSummaryData + '</div>',
});
I am calling tooltip on mouseover event using tooltipHide.show().

Answer 1

You can do using css, In css you just need to set background-size: 0px;.
like below example:
<style>
.x-custom-tooltip .x-tip-anchor{
background-size: 0px;
}
</style>
In this FIDDLE, I have created a demo using your code and put some modification. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.onReady(function () {
new Ext.Panel({
title: 'Example of tooltip in ExtJS 3.4',
renderTo: Ext.getBody(),
padding: 10,
items: [{
xtype: 'button',
text: 'Summary Button',
listeners: {
afterrender: function (btn) {
btn.tooltipHide = new Ext.ToolTip({
anchor: 'bottom',
cls: 'x-custom-tooltip',
target: btn.getEl(),
anchorOffset: 0, // center the anchor on the tooltip
width: 300,
autoHide: false,
autoScroll: true,
html: '<span style="color: green;">This tooltip using showBy method and css....<span>',
});
btn.el.on('mouseover', function (e) {
this.tooltipHide.showBy(this.getEl(), 'tl-tr');
}, btn);
btn.el.on('mouseout', function (e) {
this.tooltipHide.hide();
}, btn);
}
}
}, {
xtype: 'tbspacer',
height: 20
}, {
xtype: 'button',
text: 'Summary Button 2',
listeners: {
afterrender: function (btn) {
btn.tooltipHide = new Ext.ToolTip({
target: btn.getEl(),
anchorOffset: 0, // center the anchor on the tooltip
width: 300,
mouseOffset: [0, 25],
autoHide: false,
closable: false,
autoScroll: true,
html: '<span style="color: red;">This tooltip show by without css and removed anchor.<span>',
});
btn.el.on('mouseover', function (e) {
this.tooltipHide.show();
}, btn);
btn.el.on('mouseout', function (e) {
this.tooltipHide.hide();
}, btn);
}
}
}]
});
});