215 lines
12 KiB
HTML
215 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="A JavaScript plugin to add informative item tooltips for Guild Wars 2." />
|
|
<meta name="keywords" content="Guild Wars 2 gw2 item tooltip information hover" />
|
|
<meta name="author" content="F.W. Dekker" />
|
|
<meta name="application-name" content="GW2 item tooltip" />
|
|
|
|
<!-- JQuery / Bootstrap -->
|
|
<script src="lib/jquery.min.js"></script>
|
|
<script src="lib/bootstrap.min.js"></script>
|
|
<link rel="stylesheet" href="lib/bootstrap.min.css" />
|
|
|
|
<!-- Syntax highlighter -->
|
|
<!-- http://alexgorbatchev.com/SyntaxHighlighter/ -->
|
|
<script type="text/javascript" src="lib/shCore.min.js"></script>
|
|
<script type="text/javascript" src="lib/shBrushXml.min.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="lib/shCoreDefault.min.css"/>
|
|
<script type="text/javascript">SyntaxHighlighter.all();</script>
|
|
|
|
<!-- Custom scripts and styling -->
|
|
<script src="js/ItemTooltip.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="css/main.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/GW2Tooltip.css" />
|
|
|
|
<title>GW2 Item tooltip</title>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<a class="navbar-brand" href="#">FWDekker</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Wrapper -->
|
|
<div class="container">
|
|
<!-- Contents -->
|
|
<div class="contents">
|
|
<!-- Breadcrumbs (top) -->
|
|
<ol class="breadcrumb">
|
|
<li><a href="./">Home</a></li>
|
|
<li class="active">Documentation</li>
|
|
</ol>
|
|
<!-- /Breadcrumbs (top) -->
|
|
|
|
<!-- Header -->
|
|
<div class="page-header">
|
|
<h1>Guild Wars 2 Item tooltip</h1>
|
|
</div>
|
|
<!-- /Header -->
|
|
|
|
<div>
|
|
<!-- Intro -->
|
|
<h2>Methods of adding tooltips</h2>
|
|
<p>
|
|
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.
|
|
</p><br />
|
|
<!-- /Intro -->
|
|
|
|
<!-- addNow -->
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><h3 class="panel-title">ItemTooltip.addNow(e, itemId)</h3></div>
|
|
<table class="table">
|
|
<tr>
|
|
<th class="col-md-1">e</th>
|
|
<td>Any DOM element</td>
|
|
</tr>
|
|
<tr>
|
|
<th>itemId</th>
|
|
<td>The id of the item</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="panel-body">
|
|
<p>
|
|
By far the simplest method, <code>addNow</code> adds a tooltip by fetching the item information from the API. This happens as soon as the page loads.
|
|
</p><br />
|
|
|
|
<h4>Example</h4>
|
|
<pre class="brush: html; toolbar: false;">
|
|
<a id="addNow">The tooltip for this item is loaded when the page is loaded.</a>
|
|
<script>
|
|
ItemTooltip.addNow(document.getElementById("addNow"), 76193);
|
|
</script>
|
|
</pre>
|
|
|
|
<h4>Result</h4>
|
|
<a id="demoAddNow">The tooltip for this item is loaded when the page is loaded.</a>
|
|
<script>
|
|
ItemTooltip.addNow(document.getElementById("demoAddNow"), 76193);
|
|
</script>
|
|
</div>
|
|
</div><br />
|
|
<!-- /addNow -->
|
|
|
|
<!-- addLater -->
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><h3 class="panel-title">ItemTooltip.addLater(e, itemId)</h3></div>
|
|
<table class="table">
|
|
<tr>
|
|
<th class="col-md-1">e</th>
|
|
<td>Any DOM element</td>
|
|
</tr>
|
|
<tr>
|
|
<th>itemId</th>
|
|
<td>The id of the item</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="panel-body">
|
|
<p>
|
|
This method works almost exactly the same as <code>addNow</code>, but the main difference is that <code>addLater</code> 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.<br />
|
|
This method makes use of the <code>onmouseover</code> event. If another function is already assigned to this event, ItemTooltip will first call that function and then execute its own function.<br />
|
|
</p><br />
|
|
|
|
<h4>Example</h4>
|
|
<pre class="brush: html; toolbar: false;">
|
|
<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>
|
|
</pre>
|
|
|
|
<h4>Result</h4>
|
|
<a id="demoAddLater">The tooltip for this item is only loaded when you hover over it.</a>
|
|
<script>
|
|
ItemTooltip.addLater(document.getElementById("demoAddLater"), 6910);
|
|
</script>
|
|
</div>
|
|
</div><br />
|
|
<!-- /addLater -->
|
|
|
|
<!-- addAllNow -->
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><h3 class="panel-title">ItemTooltip.addAllNow()</h3></div>
|
|
<div class="panel-body">
|
|
<p>
|
|
The <code>addAllNow</code> method looks for all the DOM elements with the <code>data-itemid</code> attribute and puts them together into a single API request to save bandwidth. This happens as soon as the page is loaded.<br />
|
|
</p><br />
|
|
|
|
<h4>Example</h4>
|
|
<pre class="brush: html; toolbar: false;">
|
|
<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>
|
|
</pre>
|
|
|
|
<h4>Result</h4>
|
|
<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.</a>
|
|
<script>
|
|
ItemTooltip.addAllNow();
|
|
</script>
|
|
</div>
|
|
</div><br />
|
|
<!-- /addAllNow -->
|
|
|
|
<!-- addDirect -->
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><h3 class="panel-title">ItemTooltip.addDirect(e, json)</h3></div>
|
|
<table class="table">
|
|
<tr>
|
|
<th class="col-md-1">e</th>
|
|
<td>Any DOM element</td>
|
|
</tr>
|
|
<tr>
|
|
<th>json</th>
|
|
<td>The object representing the item. This object should be conform the <a href="https://wiki.guildwars2.com/wiki/API:2/items">Guild Wars 2 API specfication about items</a></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="panel-body">
|
|
<p>
|
|
<code>addDirect</code> 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.<br />
|
|
</p><br />
|
|
|
|
<h4>Example</h4>
|
|
<pre class="brush: html; toolbar: false;">
|
|
<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>
|
|
</pre>
|
|
|
|
<h4>Result</h4>
|
|
<a id="demoAddDirect">The tooltip for this item is also loaded when the page is loaded, but the data is static.</a>
|
|
<script>
|
|
ItemTooltip.addDirect(document.getElementById("demoAddDirect"), '{"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><br />
|
|
</div>
|
|
</div><br />
|
|
<!-- /addDirect -->
|
|
</div>
|
|
|
|
<!-- Breadcrumbs (bottom) -->
|
|
<ol class="breadcrumb">
|
|
<li><a href="./">Home</a></li>
|
|
<li class="active">Documentation</li>
|
|
</ol>
|
|
<!-- /Breadcrumbs (bottom) -->
|
|
</div>
|
|
<!-- /Contents -->
|
|
</div>
|
|
<!-- /Wrapper -->
|
|
</body>
|
|
</html>
|