Start Here

Introduction

Download

Syntax

Core Concepts

Aspect Ratio

Border Radius

Border Size

Border Style

Cursor

Display

Flex

Flex Alignment

Flex Direction

Flex Grow

Flex Position

Flex Size

Flex Width

Font

Gap

Height

Margin

Padding

Spacing

Width

UI Effects

Animations

Single Box

Multi Box

3D Box

Other

Box Shadows

OutSet Shadow

InSet Shadow

Text Shadow

OutSet Shadow

InSet Shadow

UI Widgets

Accordion

Buttons

Calendar

Card

Checks & Radio

Data Tables

Drag And Drop

DropDown

DropDown Multi Select

Gallery

Keypad

Pagination

Pop-Up

Progress Bar

Qty Selector

Skeleton

Spinners

Suggestion

Tabs

Toasts

Slider

Text Boxes

Text Editor

Tool Tip

Icons

Theme Color Shade

Color Shade

Text Color

Background Color

Border Color

Gradient

Text Gradient

Single Color

Double Color

Triple Color

Background Gradient

Single Color

Double Color

Triple Color

Border Gradient

Single Color

Double Color

Triple Color

Other Pages

Landing Pages

Top Nav 1

Top Nav 2

Side Nav 1

Forget Password

Apps

Add Data

Nav First Level

Nav Second Level

Nav Third Level

N
A
V

Add More Info with Customizable Tooltips

Seamless Navigation with Style

Tooltips are small, hover-activated pop-ups that provide additional information without taking up extra space on your page. They offer several benefits:

Key Features:

Improved User Experience: Tooltips deliver context-sensitive help directly where users need it, reducing confusion and making your site more intuitive.
Space Efficiency: By using tooltips, you can keep your design clean and uncluttered while still offering detailed information.
Accessibility: Tooltips can make complex terms, symbols, or processes easier to understand, improving accessibility for all users.
Enhanced Engagement: Well-placed tooltips can keep users engaged with your content by providing valuable insights without disrupting their browsing experience.
Customizable Design: Tooltips can be styled to match your website’s design, maintaining visual consistency and enhancing the overall aesthetic.

Tool Tip Absolute Position

Source Code


<button id="leftToolTip" class="Bn Br2 HrCrGn CrBrGn CrBdGn30 CrGn PnRe">Left</button>
<button id="topToolTip" class="Bn Br2 HrCrBe CrBrBe CrBdBe30 CrBe PnRe">Top</button>
<button id="bottomToolTip" class="Bn Br2 HrCrGy CrBrGy CrBdGy30 CrGy PnRe">Bottom</button>
<button id="rightToolTip" class="Bn Br2 HrCrBn CrBrBn CrBdBn30 CrBn PnRe">Right</button>


// create an obj
const leftToolTipObj = {
    Id: "leftToolTip", // id
    Tt: "Left ToolTip", // title
    Pn: "Left", // position
    Cr: "White", // color
    CrBd: "Green", // background color
    An: "AnSeLt", // animation
    Width: '300px', // max width
}

const rightToolTipObj = {
    Id: "rightToolTip",  // id
    Tt: "Right ToolTip",  // title
    Pn: "Right",  // position
    Cr: "White",  // color
    CrBd: "Green",  // background 
    An: "AnSeLt",  // animation
    Width: '300px', // max width
}

const topToolTipObj = {
    Id: "topToolTip",  // id
    Tt: "Top ToolTip",  // title
    Pn: "Top",  // position
    Cr: "White",  // color
    CrBd: "Green",  // background 
    An: "AnSeLt",  // animation
    Width: '400px', // max width
}

const bottomToolTipObj = {
    Id: "bottomToolTip", // id
    Tt: "Bottom ToolTip", // title
    Pn: "Bottom", // position
    Cr: "White", // color
    CrBd: "Green", // background 
    An: "AnSeLt", // animation
    Width: '300px', // max width
}

// call function
document.addEventListener('DOMContentLoaded', () => {
    CT.CeTlTp(leftToolTipObj)
    CT.CeTlTp(rightToolTipObj)
    CT.CeTlTp(topToolTipObj)
    CT.CeTlTp(bottomToolTipObj)
})

Auto Tooltip

Auto: Automatically display the tooltip in the direction where there's the most space.

Source Code


<button id="autoToolTip" class="Bn Br2 HrCrGn CrBrGn CrBdGn30 CrGn PnRe">Auto</button>


const autoToolTipObj = {
    Id: "autoToolTip", // id
    Tt: "Auto ToolTip", // title
    Pn: "Auto", // position
    Cr: "White", // color
    CrBd: "Green", // background 
    An: "AnSeLt", // animation
    Width: '400px', // max width
}    

// call function 
document.addEventListener('DOMContentLoaded', () => {
    CT.CeTlTp(autoToolTipObj)
})

Attribute Based Tool Tip

Source Code


<button id="exampleToolTip" 
        class="ToolTipButton Bn Br2 HrCrGn CrBrGn CrBdGn30 CrGn PnRe"
        ot='{"Tt":"Attribute Based Tool Tip","Pn":"Auto","Cr":"White","CrBd":"Green","An":"AnSeLt"}'>
    Attribute Based Tool Tip
</button>
<button id="exampleToolTip1" 
    class="ToolTipButton Bn Br2 HrCrGn CrBrGn CrBdGn30 CrGn PnRe"
        ot='{"Tt":"Attribute Based Tool Tip 1", "Pn":"Auto", "Cr":"White", "CrBd":"Green", "An":"AnSeLt"}'>
    Attribute Based Tool Tip 1
</button>
<button id="exampleToolTip2" 
    class="ToolTipButton Bn Br2 HrCrGn CrBrGn CrBdGn30 CrGn PnRe"
        ot='{"Tt":"Attribute Based Tool Tip 2", "Pn":"Auto", "Cr":"White", "CrBd":"Green", "An":"AnSeLt"}'>
    Attribute Based Tool Tip 2
</button>

Initialize Attribute Based Tool Tip Manually

Source Code


// In some cases you may want to use the tooltip and call init function manually.
document.addEventListener('DOMContentLoaded', function () {
    CT.ItTlTp(); // init tooltip
});

Web Tool

Welcome Amit

Logout

Change Password

Change Email