dl-item-card

Displays a single item card with tooltip on hover or click.

Live Preview

Usage

<dl-item-card class-name="upgrade_aoe_root"></dl-item-card>
<dl-item-card class-name="upgrade_mystic_regeneration"></dl-item-card>
<dl-item-card class-name="upgrade_chonky"></dl-item-card>

Properties

Attribute	Type	Default	Description
class-name	string	—	Item class name (e.g. "upgrade_clip_size")
item-id	number	—	Item ID (alternative to class-name)
variant	"card" | "icon"	"card"	Visual variant. "card" renders the full shop card; "icon" renders a compact square icon
hover-effect	"none" | "scale"	"none"	Hover effect on the card
show-tier-badge	boolean	—	Override the global show-tier-badge for this card. When variant="icon", the tier badge defaults to true regardless of the global setting. Set this prop to false to hide it
item-name-language	Language	—	Override language for the item name only. Tooltip content uses the global language set via dl-provider
tooltip-trigger	"hover" | "click" | "none"	—	Override the tooltip trigger for this card. Falls back to the global dl-provider value
component-items-data	ComponentItemInfo[]	—	Pre-resolved component items to display in the tooltip. When omitted, resolved automatically

Events

Event	Detail	Description
tooltipOpen	string	Emitted when the tooltip opens. Detail is the item's class_name
tooltipClose	string	Emitted when the tooltip closes. Detail is the item's class_name

Variant

Use variant="icon" to render a compact square icon instead of the full shop card. The tooltip, events, language overrides, and all other behavior remain identical.

<dl-item-card class-name="upgrade_clip_size" variant="icon"></dl-item-card>
<dl-item-card class-name="upgrade_high_velocity_mag" variant="icon"></dl-item-card>
<dl-item-card class-name="upgrade_hollow_point_rounds" variant="icon"></dl-item-card>
<!-- ... -->

The icon size can be customized via the --dl-item-icon-size CSS custom property (default 48px).

Hover Effect

Tier Badge

The tier badge can be controlled globally via dl-provider or per card:

<!-- Global: all cards show badge -->
<dl-provider show-tier-badge="true">
  <dl-item-card class-name="upgrade_clip_size"></dl-item-card>
</dl-provider>

<!-- Per card: override global setting -->
<dl-item-card class-name="upgrade_clip_size" show-tier-badge="true"></dl-item-card>

Item Name Language

Override the displayed item name language independently from the global language. Useful for showing item names in the user's language while keeping tooltip content in another.

<dl-item-card class-name="upgrade_magic_slow" item-name-language="brazilian"></dl-item-card>
<dl-item-card class-name="upgrade_magic_slow" item-name-language="japanese"></dl-item-card>
<dl-item-card class-name="upgrade_magic_slow" item-name-language="koreana"></dl-item-card>

Custom Trigger (Slot)

You can replace the default card with any custom content using a slot. The tooltip behavior (hover, click, positioning) works the same regardless of what you put inside.

<!-- Click trigger -->
<dl-item-card class-name="upgrade_aoe_root" tooltip-trigger="click">
  <button>Click me</button>
</dl-item-card>

<!-- Hover trigger (default) -->
<dl-item-card class-name="upgrade_mystic_regeneration">
  <span>Hover me</span>
</dl-item-card>