Skip to content

Add Tooltip Support for Tabs Component Labels #1794

@diwakarang

Description

@diwakarang

Is your feature request related to a problem? Please describe.
In case of lengthy text of Tabs component labels, it was suggested to keep the label short. That can be done at the user application itself, since the label is provided by user application as prop to the component.
Also, it would be helpful, if tooltip is available for each tab, so user can view full text if needed, and tabs labels will still hold short text. This tooltip is not at the control of user, so this issue is raised requesting to add this feature.
The below screenshot shows the text truncated by user application and expected behavior of tooltip when this feature request is implemented.
image

Describe the solution you'd like
Add a optional title key to tabs object in TabsComponent prop. So it would be

tabs: { label: string,
 title?: string,
 icon: string | (React.ReactNode & React.SVGProps <SVGSVGElement>), 
isDisabled: boolean, 
notificationNumber: boolean | number 
}[]

Describe alternatives you've considered
Considered the possibility of showing the full value of activeTab label in the content area of that tab. However this takes up more screen space, and reduces screen real estate for other components. Hence we had to discard this option.
image

Additional context
Related issues already created.
#1682 , #1681

Add Labels
tabs, tooltip, halstack tabs, enhancement, Tabs,

Metadata

Metadata

Assignees

No one assigned

    Labels

    AnswersA high priority issue from the Assure Answers team.enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions