123 lines
5.9 KiB
HTML
123 lines
5.9 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/GW2Tooltip.js"></script>
|
|
<script src="js/ItemTooltip.js"></script>
|
|
<script src="js/SkillTooltip.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>
|
|
<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>
|
|
<div class="container">
|
|
<div class="contents">
|
|
<!-- Breadcrumbs (top) -->
|
|
<ol class="breadcrumb">
|
|
<li class="active">Home</li>
|
|
</ol>
|
|
<!-- /Breadcrumbs (top) -->
|
|
|
|
<div class="page-header">
|
|
<h1>Guild Wars 2 Item tooltip</h1>
|
|
</div>
|
|
|
|
<a href="https://waflix.stackstorage.com/index.php/s/g7S5ESbmJJLAG5w/download"><span class="glyphicon glyphicon-download-alt"></span> Download</a><br />
|
|
|
|
<div>
|
|
<h2>About</h2>
|
|
<p>
|
|
<b>Guild Wars 2 item tooltip</b> is a JavaScript utility to add tooltips for Guild Wars 2 items to display information about them. No frameworks required and simple to use.
|
|
</p>
|
|
</div><br />
|
|
|
|
<div>
|
|
<h2>How it works</h2>
|
|
<p>
|
|
Tooltips can be added in two ways:<br />
|
|
<ul>
|
|
<li>by supplying the information to be displayed directly (using <code>ItemTooltip.addDirect</code>); or</li>
|
|
<li>by giving the ID of the item (using <code>ItemTooltip.addNow</code>).</li>
|
|
</ul>
|
|
|
|
With the latter option the <a href="https://wiki.guildwars2.com/wiki/API:2">Guild Wars 2 API</a> is accessed and up-to-date information is retrieved and used to create the tooltip. Note that this option does <i>not</i> work in Internet Explorer versions 9 and below; it does, however, work on every other major browser.<br />
|
|
|
|
For more information you can refer to the <a href="docs.html">documentation</a>.
|
|
</p>
|
|
</div><br />
|
|
|
|
<div>
|
|
<h2>Demo</h2>
|
|
<h3>Code</h3>
|
|
<pre class="brush: html; toolbar: false;">
|
|
<head>
|
|
<!-- Include the script and style -->
|
|
<script src="js/ItemTooltip.js"></script>
|
|
<link rel="stylesheet" href="css/ItemTooltip.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Add the tooltip to an element -->
|
|
<a id="demoItemTooltip">This is an item tooltip.</a>
|
|
<script>
|
|
GW2Tooltip.addNow(document.getElementById("demoItemTooltip"), 46762, ItemTooltip);
|
|
</script>
|
|
</body>
|
|
</pre>
|
|
|
|
<h3>Result</h3>
|
|
<a id="demoItemTooltip">This is an item tooltip.</a> (it may take a second to appear if you just loaded this page)
|
|
<script>
|
|
GW2Tooltip.addNow(document.getElementById("demoItemTooltip"), 46762, ItemTooltip);
|
|
</script>
|
|
</div><br />
|
|
|
|
<div>
|
|
<h2>Q&A</h2>
|
|
<h3>Q: Does it work with traits/skills/waypoints too?</h3>
|
|
<p>A: At the moment it works for items only, but I'm planning on adding this functionality later on.</p>
|
|
|
|
<h3>Q: Why don't crafting materials display the required crafting disciplines and their levels?</h3>
|
|
<p>A: The Guild Wars 2 API does currently not offer a way to retrieve this information, or at least not directly from the item itself.</p>
|
|
|
|
<h3>Q: Does it work with JQuery, Underscore, Backbone, Angular etc.?</h3>
|
|
<p>A: Yes. It does not require any framework and it should not collide with any framework either.</p>
|
|
</div><br />
|
|
|
|
<!-- Breadcrumbs (top) -->
|
|
<ol class="breadcrumb">
|
|
<li class="active">Home</li>
|
|
</ol>
|
|
<!-- /Breadcrumbs (top) -->
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|