CODEWITHSUNDEEP
javascriptextjs
Spanky
Spanky

Reputation: 709

Overlapping tooltip in Extjs Grid

I have an issue that I’ve been trying to resolve. I’m very new to Sencha ExtJS. I’ve included image links to assist my explanation.

I have a Tooltip that displays “Double-click to Configure” when you move your MouseOver the header of a table which works fine.

Shown here: http://img227.imagevenue.com/img.php?image=952843717_Header_122_41lo.jpg

Also I have a Tooltip that displays “Show Available Options” when you move your MouseOver the gear icon.

The problem is that the gear icon is within the header so when you mouseover the gear icon, the header tooltip also displays displays. Shown here http://img157.imagevenue.com/img.php?image=952937141_Config_122_421lo.jpg

I really don’t know how EXTJS renders it’s grid but is there a way for me to place the gear icon outside of the header or not display the “Double-click to Configure” Tooltip when a user mouseovers the gear icon?

I’m Not sure where to look in the code I have a file uiconstant.js that creates all the UI constants in a Static class

UIElements:
{
    SIMULATION_GRID: 'simulationgrid',
    REPORT_SCHEDULER: 'reportscheduler',
    BLENDED_BENCHMARK: 'blendedBenchmark',
    BLENDED_BENCHMARK_GROUPINGS: 'blendedBenchmark_groupings',
    DEFAULT_CONTAINER_LABEL: 'Click to configure container',
    EDIT_CONFIGURE_CONTAINER_LABEL: 'Click to edit configuration',
    DO_NOT_REQUEST_CONTENT_LABEL: 'Automatic calculation off for this dashboard.',
    NO_RECORDS_FOUND: '<div class="no-records-found">No records found</div>',
    CONTAINER_PANEL: 'containerPanel',
    DoubleClickToConfigure: 'Double-click to Configure'
}

I also have a ContainerPanel.js File that Represents the custom panel for the container. Not sure if I am looking in the correct files to make this change or update the grid

    Ext.create('Ext.tip.ToolTip', {
        target: header,
        html: UiConstant.UIElements.DoubleClickToConfigure

    });

Upvotes: 0

Views: 1144

Answers (1)

Saki
Saki

Reputation: 5856

Tooltip is supported for tools so you can configure the gear with a tooltip text. Now, header does not directly support tooltips - you handle it above by creating one and setting its header.

Let's try a bit different approach: tooltip on gear tool is de facto quicktip - only one instance of quicktip exists at a time.

To create quicktip for the header do this:

panel.getHeader().getEl().set({'data-qtip':'Your text here'});

Note: There shall always be an area around the gear tool where the tooltip changes - not sure if it is acceptable for your use case. Nevertheless, two tips shall not appear.

Upvotes: 2

Related Questions