https://github.com/giventofly/mtg-tooltip-js
MTG Tooltip Js is a Vanilla Javascript library to create card tooltips.
https://github.com/giventofly/mtg-tooltip-js
html5 images-tooltips javascript magic-the-gathering mtg mtg-cards mtg-tooltip-js tooltip tooltip-plugin vanilla-javascript
Last synced: 13 days ago
JSON representation
MTG Tooltip Js is a Vanilla Javascript library to create card tooltips.
- Host: GitHub
- URL: https://github.com/giventofly/mtg-tooltip-js
- Owner: giventofly
- License: mit
- Created: 2018-04-08T00:25:29.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-01-03T23:14:10.000Z (over 4 years ago)
- Last Synced: 2025-03-28T16:43:55.612Z (about 1 month ago)
- Topics: html5, images-tooltips, javascript, magic-the-gathering, mtg, mtg-cards, mtg-tooltip-js, tooltip, tooltip-plugin, vanilla-javascript
- Language: JavaScript
- Homepage: https://giventofly.github.io/MTG-Tooltip-Js/
- Size: 862 KB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MTG Tooltip Js
A simple vanilla javascript plugin to create images tooltips for magic the gathering cards. No dependencies, no extra css, just a .js file and little bit of html.
You can check it working live [here](https://giventofly.github.io/MTG-Tooltip-Js/), along with some **examples** of usage and a "nicier" page. You can also see one example in production at [mtgmeta.io](https://mtgmeta.io/decks/11132).
I was inspired by [Inline mtg](https://gist.github.com/NickolasReynolds/9306194) and tried to do a new version with only vanilla javascript and cut some "fat".
Why should you use this? Here are some (good) reasons:
* No libraries needed, just good old plain javascript
* lazyload tooltip images
* Low size (13kb and 7Kb minified and 2.3Kb gzipped).
* You can select defaults set for shocklands, painlands, fetchlands, and basics (more can be added, make a pull request or ask me)
* option to now load/start on mobile (you don't have a mouse to mover over the images/name to see the tooltip)
* option to remove elements created and rescan the page
* check them all bellow...
**
## API
mtgtooltip.start(); //starts, only used to rescan the page and load new items or when start is set to false
mtgtooltip.kill() // to remove all instances of the tooltip and addEventListeners.
| option | default | options | description |
|--|--|--|--|
| element |body|String|The element you want to append the tooltips to (need to have position defined) |
| lazyload |true|bool (true/false)|If you want to lazyload the tooltip images.|
|fadetime|300|integer (ms)|If you want the tooltip to fade in X ms|
|opacity|1|float [0,1]|The opacity for the tooltip to have.|
|log|false|bool (true/false)|Verbose to the console what's going on.|
|start|true|bool (true/false)|Start mtgtooltip on the instance creation.|
|wrap_in|-|String|Inicial wrap for the tooltip (div, section, whatever you like)|
|wrap_out|-|String|Final wrap for the tooltip (div, section, whatever you like)|
|specialImage|-|String|link to use costumized image on request (for the data-specialimage attribute)|
|mobile|true|bool (true/false)|Don't start the mtgtooltip on mobile/tablet devices.|
|basiclands|ust|String (ust,unh,ugl)|unstable, unhinged and unglued respectively|
|shocklands|exp|String (old,new,exp)|old: (dissension,ravnica), new: gatecrash, return to ravnica, exp: expeditions|
|fetchlands|exp|String (old,new,exp)|old: zendikar, onslaught, new: modern master 3, khans of tarkir, exp: expeditions|
|painlands|exp|String (old,new,exp)|old: ice age, apocalypse, new: magic origins, exp: tenth edition, sixth edition|
Normal usage:
Tarmogoyf
Set name:
```
i'm freeeee
```
Set edition:
```
Arid Mesa
```
Set multiverseid:
```
Tarmogoyf
```
Specific image usage
```
My altered Baneslayer Angel
```
## Quick Start:
```
```
```
document.addEventListener('DOMContentLoaded', function () {
tooltips = new mtgTooltip();
});
```
## Upgrades? Suggestions?
Open a issue/pull request or contact me.