Item Tooltips, Anywhere

Drop pixel-faithful Dark and Darker item cards onto any page with a single <script> tag. No build step, no framework.

Drop it in

One <script> tag with your key — the stylesheet loads itself. Flag any link with data-ddb and it becomes a hover card.

<script src="https://cdn.dev.darkerdb.com/library/1.6.1/tooltip.min.js"
        data-ddb-key="kf_pk_xxxx_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>

<a data-ddb="id.item.arming_sword_6001">Arming Sword</a>

Hover anything

Every word below is a bare <a data-ddb> link. Point at one and the card is fetched live from the DarkerDB API — the same frame the GrimVault overlay draws in-game. Click through to its database page, or add ?locale=<code> to draw it in any language.

Hover a word to see its <a data-ddb> markup.

Link a whole paragraph

Wrap any block in data-ddb-prose and the library scans its text for known entity names — merchants, monsters, classes, spells, perks, skills, attributes and maps — wiring each one as a tooltip in place. No manual markup.

This update adds Alchemist and Surgeon questlines, retunes the Lich and Cave Troll, buffs Fireball and the Ambush perk, raises the Armor Rating on the Barbarian's plate and trims its Move Speed penalty. Each linked name carries its icon inline — hover to read its full card, or click to open its page.

<div data-ddb-prose>
  This update adds Alchemist and Surgeon questlines,
  retunes the Lich, buffs Fireball and Ambush,
  raises Armor Rating …
</div>

Matching is whole-word and case-sensitive (game names are proper nouns). Pick which families to link with data-ddb-prose="merchant,monster,map", or add data-ddb-prose-ci for case-insensitive matching.

Make it yours

Cards ship with their art and the game's colour ramp on by default. Drop either from the same script tag to match your own page — data-ddb-icon="false" for text-only, data-ddb-color="false" for monochrome.

<script src="https://cdn.dev.darkerdb.com/library/1.6.1/tooltip.min.js"
        data-ddb-key="kf_pk_xxxx_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
        data-ddb-icon="false"
        data-ddb-color="false"></script>

data-ddb-icondefault on
The small art before a linked name and the icon panel inside the card. Set false to drop both for a plain-text embed. A single link still opts out on its own with data-ddb-no-icon.
data-ddb-colordefault on
Rarity tints, value and element colours in the card, and the tan auto-prose links. Set false and everything renders in your page's own text colour.
data-ddb-fontsdefault on
The card's typography (@font-face for the game's SaintKDG and Pelagiad faces). Set false if your page already declares those families — the lib loads a fonts-free stylesheet and nothing downloads twice.

Wiring it up by hand? Pass { icon: false, color: false } to DDB.tooltips.init() — same knobs, same defaults.

Every format

One attribute, a dozen kinds of card. The id.<kind>. prefix decides which — all in the same in-game parchment frame.

Item — archetypeitem
Shows the whole family at once — each primary stat as a per-rarity progression, plus an "up to N enchantments" summary. Use id.archetype.<slug> to force it when you don't know (or don't want to pin) a rarity.
id.archetype.arming_sword
Item — instanceitem
A rarity-suffixed id shows that one tier's values. Add a finder, gem sockets, loot state or any secondary[*] roll and the card flips to a specific rolled drop.
id.item.arming_sword_6001?found_by=Skullee&secondary[strength]=3:Ruby
Spellspell
Class spells in the parchment frame, with the ability's in-game description text.
id.spell.fireball
Perkperk
Passive perks, same chrome, description resolved live from the codex.
id.perk.dual_wield
Questquest
Quest-giver text — title and briefing — rendered without an icon panel.
id.quest.alchemist_01
Attributeattribute
Character attributes — primary stats and derived modifiers — each with the in-game description of what it does. No icon panel.
id.attribute.will
Skill & emoteskill
Class skills with their colour-coded ability text; emotes as icon + name cards.
id.skill.adrenaline_rush
The wider worldworld
Merchants, classes, containers, maps, dungeon modules, religions and monsters — each with a per-kind metadata row (services, grade and family, type and variant, tile footprint, headline drops). Containers are keyed by their spawner id.
id.merchant.surgeon · id.module.ice_cave_dual_caverns · id.monster.lich_common
Embeddedstatic
Skip the hover entirely. Paint the same card statically into any container — how the DarkerDB database pages show items inline.
DDB.tooltips.render(el, entity)

Full reference, every modifier, and a live panel in the tooltip docs.