Tabs with Tooltips in SideBar

Each tab in SideBar component can have its own tooltip. By creating a custom template for tabs displayed in the side bar, you can attach a tooltip with custom settings to all tabs. In this article, you will learn how to use IntegralUI Tooltip component to add a tooltip to each tab in side bar.

A sample code that shows how to display a tooltip over each tab in sidebar is available in JavaScript, Angular, React and Vue, in following sections below.

Sample Content Block
SideBar component is part of IntegralUI Web
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

This example shows a tooltip whenever mouse cursor hovers over tab header. The tooltip appears with small delay of 1 second and shows the tab title.

How to Add Tooltip to SideBar Tabs

At first, you need to create an object that will hold settings for the tooltip component in use. You can apply any of 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.

Because the tooltip is displayed using the IntegralUI Tooltip component (which is not part of the SideBar component), you need to create a custom template for side bar tabs. You can share this template among all tabs or create a different one for each tab separately. In this case, the template is shared and all tabs display a tooltip on mouse over.

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. This is required to determine the space where mouse cursor is captured when hovering, resulting in showing a tooltip. In case of the tab, it only shows an icon. Encapsulating the tab icon with tooltip component will show a tooltip during run-time based on tooltip settings.

In this way, whenever a mouse cursor is moved over tab icon, the tooltip will appear. Appearance of tooltip will not happen if you move quickly across different tabs, because of the initial delay set.

Tooltip is customizable using CSS. You can change the background, text color, border etc. by using custom CSS properties or modifying existing CSS classes. You can have different tooltip settings for each tab separately.

Conclusion

Although SideBar component doesn't have internal functionality for showing a tooltip, you can add a tooltip using an outside component. By simply modifying the tab template in the side bar, you can customize the appearance of the tab header and show a tooltip whenever mouse hovers over tab space.

The Tooltip component allows you to set how and when the tooltip will appear. In addition, tooltip is customizable using custom CSS properties on specifying styles with modified CSS classes.

SideBar is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.