remove arrow from extjs 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);
                }
            }
        }]
    });
});