An Old School RuneScape (OSRS) Tooltip Library to display tooltips for OSRS items on mouse hover
The project style and idea is based on World of Warcraft (WOW) tooltips - primarily the WOWhead tooltips that are used on the WOWhead website and other WOW fan sites. You can see a more thorough working demo of WOWhead tooltips here.
Include a span element in your the web page body. The example below will create a tooltip for the [Saradomin godsword] on your page.
The only modification you need to make is 1) The item text name; and 2) The OSRS item ID number. Both must be manually entered. To help, you can use my OSRS Item ID and Item Name Search Tool. You can also manually look at the summary.json file provided on the osrsbox-db project site. If you want to automate your own search, the
summary.json file is also publically available using the osrsbox-db API using a GET request on the summary.json file.
The CSS style code (osrsbox-tooltips.css) also needs to be included the HTML source code header for the web page when you want to use OSRS tooltips.
Once the OSRS tooltip library has been included in the header we can create HTML elements which have tooltips when a user hovers their mouse over the element. The OSRS tooltip library is included using HTML span elements, so can be included anywhere. Common techniques include displaying text - usually item names. You could also have a thumbnail image with a tooltip. Some code below indicates the use of each method.
The previous tooltip examples only used the default full tooltips formats, where a tooltip with detailed metadata and item stats (if the item is equipable) is included. However, you can tailor your tooltip format based on the requirements of your usage. The image below displays the four (4) different tooltip types, or formats, that are available.
As mentioned, by default the full tooltip format will be used, and no additional configuration is required to use this format. However, you can specify a different format using the
data-type HTML element. For example, if you just want to show the bonuses of the [Abyssal tentacle] then you can specify the
"bonuses". Similarly, if you just want the tooltip to display the item icon and the item name for the [Kraken tentacle], you can specify the
"short". For further examples, see below for an example of each of the four different tooltip formats.
Sometimes code snippets can be difficult to understand or implement. Therefore, the following HTML code is a full working example of how to use OSRS tooltips on a web page. This is a barebones example with minimal page formatting and style.
The website code includes a hoverable text tooltip in the form of an item name, as well as a hoverable thumbnail image example.
I would thoroughly appreciate any feedback regarding the tooltips project, especially problems with the inaccuracies of the data displayed in the tooltips, as well as missing items. So if a tooltip for a specific item is not working correctly, please let me know. The same goes for any discovered bugs, or if you have a specific feature request. The best method is to open a new Github issue in the project repository. In addition, please feel free to submit a pull request if you have code that you wish to contribute - I would thoroughly appreciate the helping hand. For any code contributions, the best method is to open a new GitHub pull request in the project repository.
This project has started to be used by other developers of Old School RuneScape fan websites - which is great! Also, a special thanks to the following GitHub users who have already contributed to the project: