RSK World - Tooltip Component | Smart Positioning, AI Tooltips, Animations, WCAG 2.1 | RSK World

Base & Advanced Positioning & Themes Animations & Gestures SEO & A11y Vanilla JS

Tooltip Component is a vanilla JS tooltip with viewport-aware positioning and optional advanced features. Base: tooltip.js and tooltip.css – data-tooltip, data-tooltip-html, positions (top/bottom/left/right), animations (fade, scale, slide, bounce), themes (default, dark, light, primary, success, warning, danger), delay, hover/click/focus triggers. Advanced: tooltip-advanced.js and tooltip-advanced.css – AI positioning (AIPositioner), gesture detection (long-press, swipe), analytics, SEO optimizer, gradient themes (neural, quantum, cosmic, sunset, forest, ocean, etc.), advanced animations (morph, elastic, wave, particle). Coexists: base skips data-ai-tooltip when advanced is loaded. Files: index.html, advanced-demo.html, examples (basic, advanced), test.html, README.md, PROJECT.md. By rskworld.in.

If you find this Tooltip Component project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Tooltip Component

Base Tooltip & Positioning

tooltip.js: Tooltip class with viewport-aware positioning, debounced resize/scroll. data-tooltip and data-tooltip-html; positions top/bottom/left/right; animations fade, scale, slide, bounce; themes default, dark, light, primary, success, warning, danger. Skips elements with data-ai-tooltip when advanced script is loaded. Methods: update(), destroy(), refresh().

tooltip.js: Tooltip class, createTooltips(), updatePosition()
tooltip.css: positions, arrows, animations, themes, reduced-motion
data-position, data-animation, data-theme, data-delay, data-trigger
ARIA: role="tooltip", aria-describedby, unique tooltip id

Project Structure & Files

tooltip-component/ with index.html (main demo: AI positioning, gestures, themes, SEO, animations, analytics, a11y), advanced-demo.html, examples/basic-example.html and advanced-example.html, test.html. CSS: tooltip.css, tooltip-advanced.css, demo.css. JS: tooltip.js, tooltip-advanced.js, demo.js, advanced-demo.js. No build step.

tooltip-component/ – index.html, advanced-demo.html, examples/, test.html
css/tooltip.css, tooltip-advanced.css, demo.css
js/tooltip.js, tooltip-advanced.js, demo.js, advanced-demo.js
Zero dependencies; vanilla HTML, CSS, JavaScript

Advanced Tooltip & AI Positioning

tooltip-advanced.js: AdvancedTooltip with AIPositioner (optimal placement from viewport and history), GestureDetector (long-press, swipe), TooltipAnalytics, SEOOptimizer, BehaviorPredictor. data-ai-tooltip, data-ai-tooltip-html; gradient themes (neural, quantum, cosmic, sunset, forest, ocean, volcano, galaxy, aurora, glass, neon); animations morph, elastic, wave, particle, rotate-3d. Escape to close, WCAG 2.1.

AIPositioner.calculateOptimalPosition(), position history
GestureDetector: touchstart, touchmove, touchend, long-press 500ms
enhanceContentWithAI(): keyword highlight , sentiment, readability
setupAccessibility(): Escape key, aria-describedby, aria-live

Themes & Animations

Base themes in tooltip.css (default, dark, light, primary, success, warning, danger). Advanced gradient themes in tooltip-advanced.css (neural, quantum, cosmic, sunset, forest, ocean, volcano, galaxy, aurora, glass, neon). Animations: base fade/scale/slide/bounce; advanced ai-enhanced, morph, elastic, slide-fade, wave, particle, rotate-3d. CSS variables for arrows; prefers-reduced-motion support.

tooltip.css: .tooltip.top/bottom/left/right, .fade, .scale, .slide, .bounce
tooltip-advanced.css: gradient themes, glass, neon, micro-interactions
Responsive and reduced-motion overrides
Author: RSK World | rskworld.in

Demo & Examples

index.html: sections for AI positioning, gestures, themes, SEO, animations, analytics, accessibility, demos. demo.js: smooth scroll, Code Examples (basic, positioning, animation, advanced) with copy-to-clipboard, Interactive Demo (text, position, animation, theme, delay) with refresh(). basic-example.html: base only; advanced-example.html: full options. test.html: quick verification.

index.html – AI, Gestures, Themes, SEO, Animations, Analytics, A11y, Demos
examples/basic-example.html, advanced-example.html, test.html
demo.js: initCodeExamples(), initInteractiveDemo(), refresh()
Accessibility: skip links, landmarks, aria labels

What You Get

Static HTML/CSS/JS: tooltip-component folder with index.html, advanced-demo.html, examples, test.html, tooltip.css, tooltip-advanced.css, demo.css, tooltip.js, tooltip-advanced.js, demo.js, advanced-demo.js. README.md, PROJECT.md, SEO.md, PROJECT_STATUS.md. No build step.

Complete source – tooltip-component with HTML, CSS, JS
No build step – open index.html or static server
README.md and README-ADVANCED.md with API and attributes
Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Include css/tooltip.css and js/tooltip.js for base tooltips. Add data-tooltip="text" or data-tooltip-html="HTML". For advanced: also include tooltip-advanced.css and tooltip-advanced.js; use data-ai-tooltip or data-ai-tooltip-html for AI positioning, gestures, themes. Open index.html for full demo.

index.html – main demo with base and advanced sections
data-tooltip, data-tooltip-html, data-ai-tooltip, data-ai-tooltip-html
Accessibility: reduce motion, ARIA, skip links
Author: RSK World | rskworld.in

Project Features

Base: viewport-aware positioning, 4 positions, 4 animations, 7 themes, hover/click/focus triggers, delay, HTML content, max-width. Advanced: AI positioning, gesture recognition (long-press, swipe), analytics, SEO optimizer, gradient themes, advanced animations, WCAG 2.1. Coexistence: base skips data-ai-* elements when advanced loaded.

Base – positioning, animations, themes, triggers, a11y
Advanced – AIPositioner, GestureDetector, Analytics, SEO, themes
Demo – code examples, interactive demo, refresh()
A11y – prefers-reduced-motion, ARIA, Escape to close

Credits & Acknowledgments

Tooltip Component by RSK World. Customizable tooltips with smart positioning, base and advanced modes, AI-style positioning, gesture recognition, and accessibility for learning vanilla JS and UI design.

Tooltip Component – smart positioning, themes, animations, AI tooltips
RSK World – Project creator and educational platform
Author: Molla Samser (Founder - RSK World)
Website: https://rskworld.in
Email: help@rskworld.in | +91 93305 39277
© 2026 RSK World. All rights reserved.