Feature Request: ToolTip for TabPanel

[esag_dk]

Back in GXT 2.x it was possible to define a ToolTip for the tab itself (described here). Since there is no header/TabItem anymore, it is only possible to use ToolTips within the widget itself, but not for the tab buttons. Is there any chance you will add this feature it in the future?

[gmartinezg011]

Same problem too.
Any suggestions please?

[esag_dk]

In the end I wrote my own TabItemConfig adding a "toolTip" value and an extended TabPanelBaseAppearance rendering a simple html-title (instead of gxt tooltip). It works OK, but I'm still missing the GXT ToolTip allowing advanced tooltips.


ToolTipTabItem.html (render template):

<li title="{config.toolTip}"><a class="{style.tabStripClose}"></a>
	<a class="{style.tabRight}"> <em class="{style.tabLeft}"> <span
			class="{style.tabStripInner}"> <span
				class="{style.tabStripText}">{config.text}</span>
		</span>
	</em>
</a></li>

ToolTipTabAppearance (if it's our tooltip config - render our tabpanel with tooltip):

...
    public interface ToolTipItemTemplate extends XTemplates
    {
        @XTemplate(source = "ToolTipTabItem.html")
        SafeHtml render(TabPanelStyle style, ToolTipTabItemConfig config);
    }
...
    protected ToolTipItemTemplate toolTipItemTemplate;


 public ToolTipTabPanelAppearance(TabPanelResources resources, Template template,
                    ItemTemplate itemTemplate, ToolTipItemTemplate toolTipItemTemplate)
    {
        super(resources, template, itemTemplate);
        this.toolTipItemTemplate = toolTipItemTemplate;
    }


  @Override
    public void insert(XElement parent, TabItemConfig config, int index)
    {
        if (config instanceof ToolTipTabItemConfig)
        {
            XElement item = XDOM.create(toolTipItemTemplate
                            .render(style, (ToolTipTabItemConfig) config).asString());
            item.setClassName(CommonStyles.get().disabled(), !config.isEnabled());


            if (config.isHTML())
            {
                XElement textEl = item.selectNode("." + style.tabStripText());
                textEl.setInnerHTML(config.getHTML());
            }


            getStrip(parent).insertChild(item, index);


            if (config.getIcon() != null)
            {
                setItemIcon(item, config.getIcon());
            }


            if (config.isClosable())
            {
                item.addClassName(style.tabStripClosable());
            }
        }
        else
        {
            super.insert(parent, config, index);
        }
    }

And that's how you can use it:

    protected TabPanel tabPanel = new TabPanel(new ToolTipTabPanelAppearance());
 ToolTipTabItemConfig tic = new ToolTipTabItemConfig();
        tic.setToolTip("myToolTip");
        tic.setText("myCaption");
        tabPanel.add(tabContent, tic);

I hope, this workaround helps you

[gmartinezg011]

If you don't mind could you please post the complete ToolTipTabAppearance and ToolTipTabItemConfig code?
I'm barely new with Sencha code and any help to the implementation will be appreciate.


Thank you.

[esag_dk]

ToolTipTabItemConfig just adds a toolTip attribute:

public class ToolTipTabItemConfig extends TabItemConfig{
    private String toolTip;


    public ToolTipTabItemConfig()
    {
        super();
    }


    public ToolTipTabItemConfig(String text, boolean close)
    {
        super(text, close);
    }


    public ToolTipTabItemConfig(String text)
    {
        super(text);
    }


    public String getToolTip()
    {
        return toolTip;
    }


    public void setToolTip(String toolTip)
    {
        this.toolTip = toolTip;
    }
}

ToolTipTabAppearance - I override the insert method and check, which config class is beeing used:

public class ToolTipTabPanelAppearance extends TabPanelBaseAppearance{
    public interface ToolTipItemTemplate extends XTemplates
    {
        @XTemplate(source = "ToolTipTabItem.html")
        SafeHtml render(TabPanelStyle style, ToolTipTabItemConfig config);
    }


    protected ToolTipItemTemplate toolTipItemTemplate;


    public ToolTipTabPanelAppearance()
    {
        this(GWT.<TabPanelResources> create(TabPanelResources.class), GWT
                        .<Template> create(Template.class), GWT
                        .<ItemTemplate> create(ItemTemplate.class), GWT
                        .<ToolTipItemTemplate> create(ToolTipItemTemplate.class));
    }


    public ToolTipTabPanelAppearance(TabPanelResources resources, Template template,
                    ItemTemplate itemTemplate, ToolTipItemTemplate toolTipItemTemplate)
    {
        super(resources, template, itemTemplate);
        this.toolTipItemTemplate = toolTipItemTemplate;
    }


    @Override
    public void insert(XElement parent, TabItemConfig config, int index)
    {
        if (config instanceof ToolTipTabItemConfig)
        {
            XElement item = XDOM.create(toolTipItemTemplate
                            .render(style, (ToolTipTabItemConfig) config).asString());
            item.setClassName(CommonStyles.get().disabled(), !config.isEnabled());


            if (config.isHTML())
            {
                XElement textEl = item.selectNode("." + style.tabStripText());
                textEl.setInnerHTML(config.getHTML());
            }


            getStrip(parent).insertChild(item, index);


            if (config.getIcon() != null)
            {
                setItemIcon(item, config.getIcon());
            }


            if (config.isClosable())
            {
                item.addClassName(style.tabStripClosable());
            }
        }
        else
        {
            super.insert(parent, config, index);
        }
    }
}

Also you need to create "ToolTipTabItem.html" in the same package as ToolTipTabPanelAppearance (see the code in my other post).

[gmartinezg011]

Thank you so much