Methods of adding tooltips

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.


ItemTooltip.addNow(e, itemId)

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.


Example

                                <a id="addNow">The tooltip for this item is loaded when the page is loaded.</a>
                                <script>
                                    ItemTooltip.addNow(document.getElementById("addNow"), 76193);
                                </script>
                            

Result

The tooltip for this item is loaded when the page is loaded.

ItemTooltip.addLater(e, itemId)

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.


Example

                                <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>
                            

Result

The tooltip for this item is only loaded when you hover over it.

ItemTooltip.addAllNow()

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.


Example

                                <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>
                            

Result

The tooltip for this item is added automatically when the page is loaded.
addAllNow() adds all the tooltips at once.

ItemTooltip.addDirect(e, json)

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.


Example

                                <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>
                            

Result

The tooltip for this item is also loaded when the page is loaded, but the data is static.