从 extjs 工具提示中删除箭头，

Question

我想从 panel 中删除这个三角形，它是在使用 extjs3 显示 tooltip 时出现的。

代码片段

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>',
});

我正在使用 tooltipHide.show() 在 mouseover 事件上调用 tooltip。

Answer 1

你可以使用css，在css中你只需要设置background-size: 0px;。

像下面的例子：

<style>
    .x-custom-tooltip .x-tip-anchor{
        background-size: 0px;
    }
</style>

在此FIDDLE中，我使用您的代码创建了一个演示并进行了一些修改。我希望这会 help/guide 你达到你的要求。

代码片段

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

从 extjs 工具提示中删除箭头，

remove arrow from extjs tooltip,

tooltip

extjs3