Aion2pedia Tooltip Widget
Enrich your guild website, community wiki, Discord bot webview, or blog with responsive, zero-latency floating tooltips for Aion 2 items, skills, sets, and status effects.
Quick Start: 1-Line HTML Snippet
Simply paste this single script tag into your HTML <head> or before the closing </body> tag. Any link to Aion2pedia will automatically display a rich floating tooltip on hover.
<script src="https://aion2pedia.com/tooltip.js" async></script>Configuration Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
src | string | "https://aion2pedia.com/tooltip.js" | Script URL. Supports loading from Aion2pedia or self-hosted static storage. |
data-lang | enum | Auto-detect (or en) | Forces display language: en, ko, ja, de, fr. |
data-theme | string | dark | Design theme matching official game client dark interface aesthetics. |
data-base-url | url | "https://aion2pedia.com" | Custom root URL for static item database JSON shards and game icon assets. |
Live Interactive Demo
Hover over or tap any link or badge below to experience the live Aion2pedia tooltip widget in action:
Items
Hover over weapons, armors, and consumables:
Skills
Hover over class, movement, and stigma skills:
Item Sets
Hover over complete armor sets and resonance bonuses:
Status Effects
Hover over crowd control debuffs and player buffs:
Custom Data Attributes
No anchor tag required. Simply add data-aion2-item, data-aion2-skill, or data-aion2-effect to any HTML element (buttons, pills, spans):
Interactive ID Tester
Enter any Aion 2 item, skill, set, or status effect ID to test its tooltip trigger:
Enter any Aion 2 item, skill, set, or status effect ID to test its tooltip trigger:
Platform Integration Guides
Step-by-step instructions for popular content management systems and documentation platforms:
🌐Plain HTML / Static Websites
Include the script tag before your closing </body> and link to any database page:
<!-- Include script -->
<script src="https://aion2pedia.com/tooltip.js" async></script>
<!-- Standard anchor link -->
<a href="https://aion2pedia.com/db/item/110130013/">Artisan's Greatsword</a>
<!-- Or data attribute on any element -->
<span data-aion2-skill="1001">Glide Skill</span>📝Markdown & MDX (Astro, Docusaurus, VitePress, Hugo)
In documentation sites built with Astro, Docusaurus, VitePress, Next.js, or Hugo, standard markdown links are enriched automatically:
[Artisan's Splendent Greatsword](https://aion2pedia.com/db/item/110130013/)
[Glide Ability](https://aion2pedia.com/db/skill/1001/)
[Stun Debuff Effect](https://aion2pedia.com/db/status-effect/100/)📚MediaWiki (Game & Guild Wikis)
On MediaWiki-powered wikis (Fandom, Miraheze, or custom server), add this line to your MediaWiki:Common.js page:
// Add to MediaWiki:Common.js
mw.loader.load('https://aion2pedia.com/tooltip.js');
// Then in your Wiki articles:
[https://aion2pedia.com/db/item/110130013/ Artisan's Greatsword]⚡WordPress & Guild Portals
In WordPress, add the script via Header and Footer Scripts plugin or directly in your child theme functions file:
function aion2pedia_enqueue_tooltips() {
wp_enqueue_script(
'aion2pedia-tooltips',
'https://aion2pedia.com/tooltip.js',
array(),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'aion2pedia_enqueue_tooltips');Core Architectural Highlights
Zero Dependencies
Pure vanilla JavaScript (< 15 KB). No jQuery, React, or external CSS bundle required.
Instant Edge CDN
Cached at Cloudflare edge locations worldwide with client-side memory caching.
Strict Privacy
Zero tracking, zero analytics scripts, and zero third-party cookies stored.
Viewport-Aware Positioning
Smooth cursor tracking with automatic edge flipping so tooltips never clip off-screen.