Decor Item Tooltips for Your Site
Add tooltips to your website that show decor item details when users hover over links
Setup
Just add one line of code to your website:
<script src="https://housing.wowdb.com/static/js/wowhousing-tooltips.bundle.js"></script>Try It Out
Hover over these links to see tooltips in action:
Regular Link:
Forged Obsidian Wand StandAnother Example:
"Autumnal Eversong" PaintingOption: Add Tooltips to Specific Text
Want to show a tooltip on text that's not a link? Add this attribute to any element:
data-wowhousing-item="ITEM_ID"
Replace ITEM_ID with the item's WoW ID (the number in our URL)
Example:
<span data-wowhousing-item="399">Hover here!</span>
Try hovering over this text
Option: Turn Off Tooltips for Specific Links
Don't want a tooltip on a particular link? Add this attribute:
data-wowhousing-tooltip="false"
Example:
<a href="https://housing.wowdb.com/decor/399/..." data-wowhousing-tooltip="false">
No tooltip here
</a>Configuration Options
Want to customize how tooltips work? You can configure them by calling WowHousingTooltips.init() with options:
<script src="https://housing.wowdb.com/static/js/wowhousing-tooltips.bundle.js"></script>
<script>
WowHousingTooltips.init({
theme: 'light', // or 'dark'
placement: 'bottom', // 'top', 'bottom', 'left', 'right'
thumbnailSize: 100, // image size in pixels
showDelay: 200, // milliseconds
hideDelay: 100, // milliseconds
cacheDuration: 1800000 // cache duration in ms (30 min)
});
</script>| Option | Default | Description |
|---|---|---|
theme |
'dark' |
Tooltip color scheme: 'dark' or 'light' |
placement |
'top' |
Preferred tooltip position: 'top', 'bottom', 'left', 'right'Automatically adjusts if there's not enough space |
thumbnailSize |
128 |
Item thumbnail size in pixels Common values: 64, 80, 100, 128 |
showDelay |
0 |
Delay in milliseconds before showing tooltip (0 = instant) |
hideDelay |
100 |
Delay in milliseconds before hiding tooltip |
Note: If you don't call
init(), tooltips will use the default settings and work automatically.