Tabs with Tooltip in TabStrip Component
By default, tabs in TabStrip component dont have a tooltip set. However, you can add your own tooltip to each tab header that will appear whenever mouse hovers over the tab header. In this article, you will learn how to use IntegralUI Tooltip component to attach a tooltip to each tab header
There is a sample code below written in JavaScript, Angular, React and Vue that shows how to display a tooltip whenever mouse cursor hovers over tabs.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As demo shows, when mouse hovers over tab header, a small tooltip showing the tab title will appear.
Following sections below contain sample code in JavaScript, Angular, React and Vue.
How to Add Tooltip to Tabs
First, you need to create an object that will hold tooltip settings. A tooltip can have the following settings:
- autoPopDelay - specifies how long the tooltip will remain visible
- enabled - determines whether tooltip is enabled or not, if false tooltip will not appear
- initialDelay - specifies the initial time before tooltip appears
- position - determines where the tooltip will appear
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
Now, in order to apply a tooltip to the tab header, you need to create a template that will show the tab title but also a tooltip. The Tooltip component appears as a pop up, based on settings specified. In order to show a tooltip, the component needs to encapsulate the HTML elements for which the tooltip will appear. In case of the tab header, the tab content is set as a child of he Tooltip component.
In this way, whenever a mouse cursor is moved over tab icon or title, the tooltip will appear. If you move quickly across different tabs, the tooltip will not appear, because of the initial delay set. You can have different tooltip settings for each tab separately.
Tooltip is customizable using CSS. You can change the background, text color, border etc. by using custom CSS properties or modifying existing CSS classes.
Conclusion
To show a tooltip for tabs whenever mouse hovers over tab header in TabStrip component is simple. You need to use the Tooltip component, and set when and how long the tooltip will remain active. By creating a template for tab header, you can apply the tooltip to each tab separately, with different settings if required. In addition, tooltip is customizable using CSS.
IntegralUI Web is a suite of native web components that includes the TabStrip. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.