Tooltips in JTB_MD are lightweight, interactive information boxes that provide additional context or details when users hover over an element. They offer a simple and effective way to enhance user experience by delivering concise information precisely when and where it's needed while making the project more space-efficient.

Unlike traditional tooltip elements, the content of tooltips can be anything, offering a dynamic solution for presenting diverse types of information within a compact and customizable space.

How to use

Unlike the conventional approach, JTB_MD takes a unique stance on tooltip elements, treating them as standalone entities linked to a trigger rather than being nested under triggers. While this approach may initially appear different, it brings numerous advantages, significantly impacting data presentation and positioning stages.

By default, all tooltip containers remain hidden behind the main body element during page initialization. To reveal them on the page, users simply need to interact with the corresponding trigger.

Creating & Linking

Creating a tooltip element is straightforward - simply craft an element with the .jtbTooltip class for container, then associate the tooltip with its trigger via adding the tooltip's ID to the trigger using the jtbTooltip attribute.

                    <!-- Trigger of tooltip -->
<button class='jtbButton' jtbTooltip='dd-1'>Hover me!</button>

<!-- Tooltip element -->
<span class='jtbTooltip' id='dd-1'>Hello, I have additional content!</span>

The trigger element can be any type of DOM elements. In this documentation, we've used buttons for better alignment, but in the library, there is no limitation. Adding the jtbTooltip attribute is sufficient to make any element a tooltip trigger.

For a better experience, define your .jtbtooltip elements directly under your body element instead of nesting them into other elements. This helps prevent z-index issues and creates smoother experiences. For more information on z-indexes, check out the Z-index section.

Tooltip elements in JTB_MD serve as versatile containers, capable of housing any type of content. They dynamically position themselves based on their triggers, offering flexibility in both data and style, limited only by your creative imagination.

                    <!-- You can add any content. -->
<span class='jtbTooltip' id='...'>
    ...
</span>

Nesting

Like we've stated in the content section, anything can be included as content in tooltip containers. This rule works with other tooltip triggers too. To create a nested tooltips, you can simply add their triggers to your desired tooltip containers.

                    <!-- First trigger --> 
<button class='jtbButton' jtbTooltip='dd-1'>Trigger 1</button>

<!-- jtbTooltip containers & nested triggers -->
<span class='jtbTooltip' id='dd-1'><button class='jtbButton' jtbTooltip='dd-2'>Trigger 2</button></span>
<span class='jtbTooltip' id='dd-2'><button class='jtbButton' jtbTooltip='dd-3'>Trigger 3</button></span>
<span class='jtbTooltip' id='dd-3'><button class='jtbButton' jtbTooltip='dd-4'>Trigger 4</button></span>
<span class='jtbTooltip' id='dd-4'><button class='jtbButton' jtbTooltip='dd-5'>Trigger 5</button></span>
<span class='jtbTooltip' id='dd-5'>No limit...</span>

At this point, it's important to note that tooltip elements have listeners that check whether the user is interacting with other elements in the DOM. If a user hovers an element that is not a trigger of tooltip nor container of it, the unrelated tooltips automatically close to provide a smoother user experience. This rule also applies to nested tooltips. If the user interacts with layer 3 of multi-layer tooltip group, layers 4 and above will close automatically.

Offsetting

To create offset between yout trigger and tooltip container, you can add offset attribute with desired offset in pixels to your .jtbTooltip element.

                    <!-- Tooltip with offset (16px) -->
<span class='jtbTooltip' id='...' offset='16'>...</span>

Positioning

When it comes to positioning containers, JTB_MD leverages the jtbPositioning plugin of the library, which handles all the heavy lifting for you.

During the positioning stage, the plugin seamlessly integrates with two fundamental principles that hold significant value:

Overflow prevention: The plugin automatically adjusts the tooltip containers' size if there is a possibility for an overflow.
Flipping: In cases where overflow prevention is not possible, the plugin strategically positions the container on the optimal edge of the trigger to maximize visibility within the viewport.

With these two principles JTB_MD aims to make tooltips stay on screen as much as possible and provide a smooth user experience.

To set a default position for your containers, prioritized by the plugin, add the position attribute to your .jtbContainer element and specify the desired side. Possible values are TL | TC | TR | RT | RC | RB | BR | BC | BL | LB | LC | LT where each letter are the first letter of edges.

                    <!-- Tooltip with specified position (TOP - LEFT) -->
<span class='jtbTooltip' id='...' position='BR'>...</span>

Trigger States

To change the stage of tooltip containers, JTB_MD adds or removes .show class into the tooltips. Likewise, for the triggers, the library adds or removes .open class to them. If you need to differentiate the triggers which are on the open state you can use these classes.

                    <!-- Custom trigger styling for open states -->
<style>
    [jtbTooltip].open{
        background: lightblue;
    }
</style>

Styling

By default tooltip elements are blank containers that has no display attributes or pre-defined styles. However, to make them more inline with the library, .25rem padding is defined as their initial. To override this or make your tooltips more stylish, you can simply override this attribute or define your related styling in your elements.

Never forget that you can leverage all classes from the Utilities section to seamlessly integrate elements with your design. However, the following pre-defined classes within tooltips have been crafted to simplify your design workflow.

Removing Borders

To create a borderless tooltip element, simply apply the .jtbTooltip-borderless class.

                    <!-- Borderless Tooltip -->
<span class='jtbTooltip jtbTooltip-borderless' id='...'>...</span>

Rectangular

To make your tooltip container rectangular (with no border radius), apply the .jtbTooltip-rect class to it.

                    <!-- Rectangular Tooltip -->
<span class='jtbTooltip jtbTooltip-rect' id='...'>...</span>

Javascript Plugin

In JTB_MD, the actions and methods that tooltips can perform are defined in the jtbTooltip plugin. Ensure that you haven't manually removed it from your project to utilize its functionalities properly.

For detailed information on plugins, refer to the JavaScript section.

Methods

In jtbTooltip plugin of JTB_MD there are three methods available. Instead of letting library automatically handle the work, if you want to do that manually, you can call any of them whenever you want.

Show

To make a specific tooltip visible on your DOM, you can invoke the plugin with the "show" parameter. You can trigger the method as: $(tooltip).jtbTooltip('show', callbackFunction); where:

$(tooltip) represents the tooltip element that you want to make visible,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Show hidden tooltip -----*/
$("#tooltipID").jtbTooltip("show");

Hide

To hide a specific tooltip in your DOM, you can invoke the plugin with the "hide" parameter. You can trigger the method as: $(tooltip).jtbTooltip('hide', callbackFunction); where:

$(tooltip) represents the tooltip element that you want to make hidden,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Hide visible tooltip -----*/
$("#tooltipID").jtbTooltip("hide");

Toggle

To toggle visibility of a specific tooltip on your DOM (hide if visible and make it visible if hidden), utilize the jtbTooltip() function with the "toggle" parameter. You can trigger the method as: $(tooltip).jtbTooltip('toggle', callbackFunction); where:

$(tooltip) represents the tooltip element that you want to toggle visibility,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Toggle visibility of tooltip -----*/
$("#tooltipID").jtbTooltip("toggle");

Callbacks

The jtbTooltip plugin offers two ways to specify a callback function on tooltips' actions.

Defining Listeners

All the methods that a tooltip perform (show | hide | toggle) has listeners that can be triggered via adding their attributes into .jtbTooltip element.

onShow: An attribute used to define a function that will be triggered after the tooltip becomes visible.
onHide: An attribute used to define a function that will be triggered after the tooltip becomes invisible.
onToggle: An attribute used to define a function that will be triggered after the tooltip changed visibility.

By default, the tooltip elements utilize the show and hide methods of the plugin to change their visibility when their triggers interacted by users. If you define a function for their listener, it will be triggered by the library every time the method is invoked.

                        /*----- Triggering callback via attributes. -----*/
<span class='jtbTooltip' id='...' onShow='showProcessDone();'>...</span>

Dynamic Callbacks

If you call methods of the plugin manually, you can supply the function name or the function itself into the method as a second parameter.

                        /*----- Show Tooltip and callback (Providing Function Name) -----*/
$("#tooltipID").jtbTooltip("show", showProcessDone);

/*----- Show Tooltip and callback (Providing Function Directly) -----*/
$("#tooltipID").jtbTooltip("show", function(){
    alert('Process done boss.');
});

Hello! Hello! Hello! Hello! Hello! Hello! I have no borders I'm rectengular Hello, I'm a tooltip container!