Getting started
Core
Utilities
Layout systems
Design
Components
Form elements
Others
Layout

JTB-Tooltip

A versatile component for displaying contextual information on hover.

About

The JTB-Tooltip is a versatile component designed to provide contextual information when users hover over an element. It enhances user experience by displaying helpful tips, descriptions, or additional information without cluttering the main interface.

With customizable positioning, animations, and styles, the JTB-Tooltip is suitable for a variety of use cases, ensuring information is conveyed seamlessly and effectively within your web applications.

How to use

To create a JTB-Tooltip element in your projects, use the <jtb-tooltip> tag in the way that suits your needs. Whether you add elements dynamically with JavaScript, directly in HTML, or through server-side languages like PHP, it doesn’t matter. As long as the component is correctly initialized, JTB_MD will handle the request of yours and render the element as specified.

Once you've defined your tooltip element and specified its content, you can make any element its trigger by adding the jtb-tooltip attribute to it. The attribute value needs to be the ID of your tooltip element.

Hello, this is an example tooltip!
<!-- Trigger element --> <jtb-button jtb-tooltip='tt-1'></jtb-button> <!-- tooltip element --> <jtb-tooltip id='tt-1'>Hello, this is an example tooltip!</jtb-tooltip>
/*----- Create tooltip -----*/ var mytooltip = document.createElement('jtb-tooltip'); /*----- Specify ID -----*/ mytooltip.id = 'tt-1'; /*----- Adjust content -----*/ mytooltip.innerHtml = 'Hello, this is an example tooltip!'; /*----- Add element to body -----*/ document.body.append(mytooltip); /*----- Connect it to its trigger -----*/ document.getElementById('triggerID').setAttribute('jtb-tooltip', 'tt-1');

Customization

Content and display

Defining content

As demonstrated in the example above, JTB-Tooltip elements are blank containers that allow you to place any content inside them. From simple texts to complex structures, you have the flexibility to include anything within the tooltip. To define the content, simply place your desired elements between the opening and closing tags of the <jtb-tooltip> component.

This one includes HTML
<!-- tooltip element with html content --> <jtb-tooltip><span>This one includes <b>HTML</b></span></jtb-tooltip>
/*----- Create tooltip -----*/ var mytooltip = document.createElement('jtb-tooltip'); /*----- Adjust content (HTML) -----*/ mytooltip.innerHtml = `<span>This one includes <b>HTML</b></span>`;
Nesting

JTB-Tooltip containers are fixed elements within the DOM that reposition themselves based on their triggers. You can nest tooltips by placing trigger elements inside other tooltips. This allows for more complex and layered tooltip interactions, providing enhanced flexibility in your UI design.

Hover to open tooltip Hover to open tooltip Hover to open tooltip Hover to open tooltip No limit...
<!-- First trigger --> <jtb-button jtb-tooltip='dd-1'></jtb-button> <!-- First tooltip (Assigned as second tooltip's trigger) --> <jtb-tooltip id='dd-1' jtb-tooltip='dd-2'>Hover to open tooltip</jtb-tooltip> <!-- Second tooltip --> <jtb-tooltip id='dd-2'>...</jtb-tooltip>
offset

If you need to create a gap between your trigger element and your tooltip container, you can specify it via adding offset attribute in your JTB-Tooltip element with your desired gap in pixels as value.

This one has 8px offset
<!-- tooltip wit 8px offset --> <jtb-tooltip offset='8'></jtb-tooltip>
/*----- Create tooltip -----*/ var mytooltip = document.createElement('jtb-tooltip'); /*----- Adjust offset -----*/ mytooltip.offset = 8;
position

To specify position of tooltip container based on its trigger you can use position attribute of it. Possible values are TL | TC | TR | RT | RC | RB | BR | BC | BL | LB | LC | LT where each letter are the first letter of edges.

During the positioning stage, the jtb-tooltip follows two fundamental principles:

  • Prevent overflowing: The element automatically adjusts its size if the container can expand without any overflow.
  • Stay in screen: The element strategically positions itself on the optimal edge of the trigger to maximize visibility within the viewport.

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

This is an example tooltip

It has position='TL'

 This is an example tooltip

It has position='TC'

 This is an example tooltip

It has position='TR'

 This is an example tooltip

It has position='LT'

 This is an example tooltip

It has position='LC'

 This is an example tooltip

It has position='LB'

 This is an example tooltip

It has position='RT'

 This is an example tooltip

It has position='RC'

 This is an example tooltip

It has position='RB'

 This is an example tooltip

It has position='BL'

 This is an example tooltip

It has position='BC'

 This is an example tooltip

It has position='BR'
<!-- Bottom left (BL) positioned tooltip --> <jtb-tooltip position='BL'></jtb-tooltip>
/*----- Create tooltip -----*/ var mytooltip = document.createElement('jtb-tooltip'); /*----- Adjust position -----*/ mytooltip.position = 'LT'; // Left top mytooltip.position = 'LC'; // Left center mytooltip.position = 'LB'; // Left bottom mytooltip.position = 'RT'; // Right top mytooltip.position = 'RC'; // Right center mytooltip.position = 'RB'; // Rightbottom mytooltip.position = 'TL'; // Top left mytooltip.position = 'TC'; // Top center mytooltip.position = 'TR'; // Top right mytooltip.position = 'BL'; // Bottom left mytooltip.position = 'BC'; // Bottom center mytooltip.position = 'BR'; // Bottom right

Style and appearance

Since JTB-Tooltip elements are blank containers, they offer complete flexibility for you to manipulate and style them as needed. You can easily apply your custom design or appearance attributes onto them. However, to simplify your workflow, we've also provided predefined attributes for JTB-Tooltip elements that enable you to customize their style and appearance with ease.

shape

To change the shape of the tooltip container, use the shape attribute with your desired value.

Available options are: default | rect.

This one has shape='default' This one has shape='rect'
<!-- default shape --> <jtb-tooltip shape='default'></jtb-tooltip> <!-- rect shape --> <jtb-tooltip shape='rect'></jtb-tooltip>
/*----- Create element -----*/ var mytooltip = document.createElement('jtb-tooltip'); /*----- Adjust shape -----*/ mytooltip.shape = 'default'; // Set shape = default mytooltip.shape = 'rect'; // Set shape = rect

Listeners & Callbacks

JTB Tooltips are components built upon the jtbComponent element. As a result, they inherit all global listeners and callbacks, ensuring consistent event handling. For a detailed overview, refer to the Base component - Core page.

Methods

JTB Tooltips inherit all core methods from the base component, ensuring fundamental functionality such as show(), hide(), reload(), and destroy() remain available. For a complete list of inherited methods, visit the Base Component - Core page.

In addition to these inherited methods, JTB Tooltips introduce specialized methods tailored to their unique functionality:

API

While each property on its own brings unique changes to the elements, combining them can help you create the perfect one.

For making it easier to navigate through all the attributes, we’ve created a comprehensive table for you. Below, you can find a list of all and their uses.

Copyright © 2025 JTBLabs - All rights reserved.