Tooltip - Warcraft DB

View all {{ currentMobileParent.label }} →
{{ item.label }} ›

Embed one script on your site. Every link that points at Warcraft DB then shows a game-style tooltip on hover. The script also renames, colours and iconises those links.

Example → https://cataclysm.warcraftdb.com/data/item/19019

Hover the link above. On touch devices, tap it.

Usage

Add this to the <head> of your page:

<link rel="stylesheet" href="https://cataclysm.warcraftdb.com/static/css/tooltip.css">
<script src="https://cataclysm.warcraftdb.com/static/js/tooltip-embed.js"></script>

The script builds its tooltips inside a shadow root and loads the stylesheet itself, so the tooltip always looks correct. The <link> tag styles the links in your page: quality colour and icon size. Omit it if you only want the hover tooltip.

Plain links

Any link to a data page works with no extra markup:

<a href="https://cataclysm.warcraftdb.com/data/item/19019"></a>

Leave the link text empty, or paste the raw URL as the text, and the script fills in the real name. Text you write yourself is left alone.

Plain links are detected for these types: item, spell, quest, achievement, faction, title, object, zone, currency and npc.

Explicit tooltips

Use an attribute when the element is not a data-page link, or when you need a type that plain links do not cover. The format is type:id, with an optional difficulty id:

<a href="#" data-wcdb-tooltip="item:19019">Thunderfury</a>
<span data-wcdb-tooltip="spell:21992">Thunderfury</span>
<a href="#" data-wcdb-tooltip="item:190510:14">Heroic difficulty</a>

Explicit tooltips accept every type the tooltip API renders:

{{ type }}

Enchants and gems

Items accept two extra attributes. data-wcdb-ench takes an enchantment id. data-wcdb-gems takes gem item ids separated by colons, in socket order. Use 0 for an empty socket.

<a href="#"
   data-wcdb-tooltip="item:29081"
   data-wcdb-ench="2666"
   data-wcdb-gems="24028:24054:0">Enchanted chest</a>

Game versions

Each game version has its own subdomain, and the subdomain in the link decides which version the tooltip comes from. A link to classic.warcraftdb.com always shows Classic Era data, even on a page that also links to other versions.

Version	Link host
{{ row.label }}	`{{ row.host }}`

Explicit data-wcdb-tooltip attributes have no host, so they always use the site that served the script. Load the script from the subdomain you want.

Configuration

Declare a wdbTooltipConfig object before the script tag. Every option is optional; the defaults are shown below.

<script>
const wdbTooltipConfig = {
	renameLinks: true,   // replace empty or raw-url link text with the real name
	colorLinks: true,    // add a quality colour class to the link
	iconizeLinks: true,  // insert an icon before the link text
	iconSize: 'small',   // 'small', 'medium' or 'large'
	lazyLoading: false,  // true = hover tooltips only, no link decoration
	parseUrl: ''         // extra domain to scan for links, besides this site
};
</script>

Option	Default	Effect
`renameLinks`	`true`	Sets the link text to the entry name when the link is empty or its text is a raw URL. Author-written text is never replaced.
`colorLinks`	`true`	Adds `q-0` to `q-8` to items by quality, and `misc` to every other type.
`iconizeLinks`	`true`	Inserts an icon element before the link text.
`iconSize`	`'small'`	Icon size: `small` (18px), `medium` (36px) or `large` (56px).
`lazyLoading`	`false`	Set to `true` to skip link decoration. Nothing is fetched until the user hovers.
`parseUrl`	the script's own host	An extra domain to scan for links. Use it if your links point at an old domain that still maps to this site.

Per-link overrides

Override the global config on a single link with data attributes:

<a href="https://cataclysm.warcraftdb.com/data/item/19019"
   data-warcraftdb-rename-link="false"
   data-warcraftdb-color-link="true"
   data-warcraftdb-iconize-link="true"
   data-warcraftdb-icon-size="large">Thunderfury</a>

Attribute	Overrides	Values
`data-warcraftdb-rename-link`	`renameLinks`	`true` / `false`
`data-warcraftdb-color-link`	`colorLinks`	`true` / `false`
`data-warcraftdb-iconize-link`	`iconizeLinks`	`true` / `false`
`data-warcraftdb-icon-size`	`iconSize`	`small` / `medium` / `large`

Styling

The tooltip itself lives in a shadow root, so your page styles cannot reach it and it cannot affect your page. Link decoration is not isolated. Override these classes to restyle links:

Class	Applied to
`.warcraftdb-link`	Every decorated link.
`.warcraftdb-link-icon`	The icon inserted before the link text.
`.warcraftdb-icon-size-small`, `-medium`, `-large`	The icon, by configured size.
`.q-0` … `.q-8`	Item links, by quality.
`.misc`	Links of any other type.

API

The script reads from a public endpoint. Call it directly if you would rather render tooltips yourself. It returns JSON with html, icon, name and quality, and it allows cross-origin requests.

https://cataclysm.warcraftdb.com/api/v1/tooltip/item/19019
https://cataclysm.warcraftdb.com/api/v1/tooltip/item/29081?ench=2666&gems=24028:24054:0