There is a variety of methods to add tooltips. Those methods are listed below with a short explanation and an example or a link to an example. To simplify the examples, the including of the script and stylesheet is left out.
e | Any DOM element |
---|---|
itemId | The id of the item |
By far the simplest method, addNow
adds a tooltip by fetching the item information from the API. This happens as soon as the page loads.
<a id="addNow">The tooltip for this item is loaded when the page is loaded.</a> <script> ItemTooltip.addNow(document.getElementById("addNow"), 76193); </script>
e | Any DOM element |
---|---|
itemId | The id of the item |
This method works almost exactly the same as addNow
, but the main difference is that addLater
first fetches the item information from the API when the user hovers their mouse over the tooltip. This results in a faster page loading time, but a slower tooltip loading time.
This method makes use of the onmouseover
event. If another function is already assigned to this event, ItemTooltip will first call that function and then execute its own function.
<a id="addLater">The tooltip for this item is only loaded when you hover over it.</a> <script> ItemTooltip.addLater(document.getElementById("addLater"), 6910); </script>
The addAllNow
method looks for all the DOM elements with the data-itemid
attribute and puts them together into a single API request to save bandwidth. This happens as soon as the page is loaded.
<a data-itemid="4019">The tooltip for this item is added automatically when the page is loaded.</a><br /> <a data-itemid="1020">addAllNow() adds all the tooltips at once. <script> ItemTooltip.addAllNow(); </script>
e | Any DOM element |
---|---|
json | The object representing the item. This object should be conform the Guild Wars 2 API specfication about items |
addDirect
can be used to create a tooltip without querying the API. This method should be used when the tooltip should not reflect up-to-date item information.
<a id="addDirect">The tooltip for this item is also loaded when the page is loaded, but the data is static.</a> <script> ItemTooltip.addDirect(document.getElementById("addDirect"), '{"name":"Strong Swindler Pants of Vampirism","description":"","type":"Armor","level":32,"rarity":"Masterwork","vendor_value":90,"default_skin":28,"game_types":["Activity","Wvw","Dungeon","Pve"],"flags":["SoulBindOnUse"],"restrictions":[],"id":1449,"chat_link":"[&AgGpBQAA]","icon":"https://render.guildwars2.com/file/51EBE5BAF9640A9250D90F5DAC1458A9B8F1390D/61051.png","details":{"type":"Leggings","weight_class":"Medium","defense":59,"infusion_slots":[],"infix_upgrade":{"attributes":[{"attribute":"Power","modifier":21},{"attribute":"Precision","modifier":15}]},"suffix_item_id":24709,"secondary_suffix_item_id":""}}'); </script>