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

Posted 2023-02-26

【中文标题】从 extjs 工具提示中删除箭头，

【英文标题】：remove arrow from extjs tooltip,

【发布时间】：2018-03-21 09:52:01

【问题描述】：

我想从 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。

【参考方案1】：

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

如下例：

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

在这个 FIDDLE 中，我使用您的代码创建了一个演示并进行了一些修改。我希望这将帮助/指导您实现您的要求。

代码片段

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

【讨论】：

如何接受？我刚刚得到了投票的选项。请指导

在我的回答中，您将使用right 图标。你只需要点击它。

我们可以修复工具提示位置的另一件事，对我来说它没有显示在固定位置。有时更靠左，有时更靠右

你可以使用这个this.tooltipHide.showBy(this.getEl(), 'tl-tr');。这将始终显示提示的左上角锚定到元素的右上角link。