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)
hover-effect	"none" | "scale"	"none"	Hover effect on the card
show-tier-badge	boolean	—	Override the global show-tier-badge for this card
item-name-language	Language	—	Override language for the item name only. Tooltip content uses the global language set via dl-provider
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

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>