Tooltip Embed

Add one script and tag item links to show SpaceCraftDB hovercards on hover and keyboard focus.

Install

<script
  defer
  src="https://spacecraftdb.com/embed/v1/tooltip.js"
  data-scdb-theme="auto"
  data-scdb-prefetch="hover"
></script>

Theming

Use data-scdb-theme="auto", dark, or light for the built-in themes. For a full retheme, set custom and define SpaceCraftDB tooltip CSS variables on your page.

<script
  defer
  src="https://spacecraftdb.com/embed/v1/tooltip.js"
  data-scdb-theme="custom"
  data-scdb-class="my-scdb-tooltip"
></script>

<style>
  :root {
    --scdb-tip-bg: #14110f;
    --scdb-tip-text: #fff8ed;
    --scdb-tip-muted: #c8b8a2;
    --scdb-tip-accent: #ffb84d;
    --scdb-tip-link: #ffb84d;
    --scdb-tip-border: rgba(255, 184, 77, 0.42);
    --scdb-tip-shadow: 0 18px 42px rgba(20, 17, 15, 0.38);
    --scdb-tip-radius: 8px;
  }
</style>

Supported variables include --scdb-tip-bg, --scdb-tip-text, --scdb-tip-muted, --scdb-tip-desc, --scdb-tip-accent, --scdb-tip-link, --scdb-tip-border, --scdb-tip-divider, --scdb-tip-shadow, --scdb-tip-radius, --scdb-tip-width, --scdb-tip-padding, --scdb-tip-font, --scdb-tip-icon-bg, --scdb-tip-icon-border, --scdb-tip-icon-radius, --scdb-tip-pill-bg, --scdb-tip-pill-border, --scdb-tip-pill-radius, --scdb-tip-key, and --scdb-tip-z-index.

Preferred Markup

<a
  href="https://spacecraftdb.com/items/aluminum-ingot"
  data-scdb-item
  target="_blank"
  rel="noopener"
>Aluminum Ingot</a>

The link must remain a followed link. Do not add nofollow, ugc, sponsored, or noreferrer.

Non-Link Fallback

<span data-scdb-item="aluminum-ingot">Aluminum Ingot</span>

Script API

window.SpaceCraftDBTooltip.version
window.SpaceCraftDBTooltip.init({
  selector: "[data-scdb-item]",
  theme: "custom",
  className: "my-scdb-tooltip",
  variables: {
    "--scdb-tip-bg": "#14110f",
    "--scdb-tip-text": "#fff8ed",
    "--scdb-tip-accent": "#ffb84d"
  }
})
window.SpaceCraftDBTooltip.refresh(document.body)
window.SpaceCraftDBTooltip.destroy()

Data Endpoints