Skip to content
everloot
Get the addon

Tooltips on your site

Add Everloot hover cards to a blog, guild site or forum theme.

Prerequisites#

  • A page where you can edit the HTML, or a site where you can add a script to the footer.
  • Links to Everloot pages. Anything under everloot.app/database/ for an item, NPC, quest or object works.
  • No account and no key. The script and the data behind it are open.

Steps#

  1. Make a test page

    Start with a plain HTML file. Save this as tooltip-test.html. The script tag goes just before the closing </body>. The second link has data-everloot-tooltip="off", which tells the script to skip it.

    tooltip-test.html
    <!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Tooltip test</title></head>
<body>
  <p>
    The sword is <a href="https://everloot.app/database/items/19019">Thunderfury</a>,
    and this link is <a href="https://everloot.app/database/items/19019" data-everloot-tooltip="off">left alone</a>.
  </p>
  <script src="https://everloot.app/tooltips.js" async></script>
</body>
</html>

    Open the file in your browser and hover the first link. Check your work says what to expect today.

  2. Add it to WordPress

    For one post or page, add a Custom HTML block and paste the script tag into it. Write your links as normal links, in the editor or in the same block.

    For the whole site, put the same tag in the theme's footer, just before </body>. In most themes that is footer.php. If you would rather not edit theme files, a plugin that adds code to the footer does the same job. Use a child theme so a theme update does not remove your change.

    Footer or Custom HTML block
    <script src="https://everloot.app/tooltips.js" async></script>

  3. Add it to a forum theme

    Forum software has a place for extra HTML at the end of every page: a footer template, or a "custom code" or "extra scripts" setting in the theme. Paste the same tag there. Members then write ordinary links to Everloot pages in their posts, and the script picks up links added after the page has loaded.

    If your forum sets a Content Security Policy, it has to allow https://everloot.app as a script source and for connections, because the script fetches each card from there.

  4. Choose which links get a card

    The script looks at the link's address. These shapes get a card. Everything else, including every link to another site, is ignored.

    Links that match
    <a href="https://everloot.app/database/items/19019">an item</a>
<a href="https://everloot.app/database/npcs/6">an NPC</a>
<a href="https://everloot.app/database/quests/9">a quest</a>
<a href="https://everloot.app/database/objects/1">an object</a>
<a href="https://everloot.app/database/items/19019-thunderfury">a slug after the id is fine</a>

    To skip one link, add data-everloot-tooltip="off" to it.

  5. Check the data for a link

    A card is built from GET /api/tooltip/{type}/{id}. Ask it for the page you linked to.

    Ask for one card
    curl -s -w "\n%{http_code}\n" https://everloot.app/api/tooltip/item/19019

    When players have reported the page, you get the card as JSON and a 200. The shape, with values trimmed:

    Reported page
    {
  "ok": true,
  "type": "item",
  "id": 19019,
  "title": "…",
  "color": "#ff8000",
  "icon": "https://…",
  "lines": ["…"],
  "partial": false,
  "url": "https://everloot.app/database/items/19019",
  "attribution": { "licence": "CC BY-SA 4.0", "credit": "Data from Everloot (https://everloot.app), CC BY-SA 4.0.", "…": "…" },
  "gameData": { "label": "…", "build": "…", "credit": "…" }
}
200

    When nobody has, you get a 404 and the script shows no card:

    Page nobody has reported
    {"ok":false,"error":"Nothing to show: no such page, or players have not reported it yet."}
404

Check your work#

  • Hover or tab to a link to a reported page: a card appears below it. Press Escape and it closes.
  • In your browser's network tab, hovering a matching link makes one request to everloot.app/api/tooltip/…. A 404 means the page has not been reported. It is not a fault in your setup.
  • The link with data-everloot-tooltip="off" makes no request.
  • On a touch screen, the first tap shows the card and the second follows the link.
  • If nothing is requested at all, check that the script tag is on the page and that the console shows no Content Security Policy error.

The script sets no cookies, and each request is sent without cookies or a referrer. A card carries the licence, and item cards credit Blizzard for game-file text and icons.

Next steps#