{"id":18908646,"url":"https://github.com/giventofly/mtg-tooltip-js","last_synced_at":"2025-07-19T16:33:23.436Z","repository":{"id":128005932,"uuid":"128580088","full_name":"giventofly/MTG-Tooltip-Js","owner":"giventofly","description":"MTG Tooltip Js is a Vanilla Javascript library to create card tooltips.","archived":false,"fork":false,"pushed_at":"2021-01-03T23:14:10.000Z","size":883,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-22T07:12:33.910Z","etag":null,"topics":["html5","images-tooltips","javascript","magic-the-gathering","mtg","mtg-cards","mtg-tooltip-js","tooltip","tooltip-plugin","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://giventofly.github.io/MTG-Tooltip-Js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/giventofly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-08T00:25:29.000Z","updated_at":"2024-06-07T19:57:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"1ba46f59-1707-4478-bdf9-185f756bd3b8","html_url":"https://github.com/giventofly/MTG-Tooltip-Js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/giventofly/MTG-Tooltip-Js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giventofly%2FMTG-Tooltip-Js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giventofly%2FMTG-Tooltip-Js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giventofly%2FMTG-Tooltip-Js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giventofly%2FMTG-Tooltip-Js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/giventofly","download_url":"https://codeload.github.com/giventofly/MTG-Tooltip-Js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giventofly%2FMTG-Tooltip-Js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265965908,"owners_count":23857054,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html5","images-tooltips","javascript","magic-the-gathering","mtg","mtg-cards","mtg-tooltip-js","tooltip","tooltip-plugin","vanilla-javascript"],"created_at":"2024-11-08T09:27:41.430Z","updated_at":"2025-07-19T16:33:23.403Z","avatar_url":"https://github.com/giventofly.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n# MTG Tooltip Js\n\n\n\nA 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.\n\nYou 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).\n\nI 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\".\n\nWhy should you use this? Here are some (good) reasons:\n\n* No libraries needed, just good old plain javascript\n* lazyload tooltip images\n* Low size (13kb and 7Kb minified and 2.3Kb gzipped).\n* You can select defaults set for shocklands, painlands, fetchlands, and basics (more can be added, make a pull request or ask me)\n* option to now load/start on mobile (you don't have a mouse to mover over the images/name to see the tooltip)\n* option to remove elements created and rescan the page\n* check them all bellow...\n\n  **\n\n## API\n\n    mtgtooltip.start(); //starts, only used to rescan the page and load new items or when start is set to false\n    mtgtooltip.kill() // to remove all instances of the tooltip and addEventListeners.\n\n\n| option | default | options | description |\n|--|--|--|--|\n| element |body|String|The element you want to append the tooltips to (need to have position defined) |\n| lazyload |true|bool (true/false)|If you want to lazyload the tooltip images.|\n|fadetime|300|integer (ms)|If you want the tooltip to fade in X ms|\n |opacity|1|float [0,1]|The opacity for the tooltip to have.|\n |log|false|bool (true/false)|Verbose to the console what's going on.|\n|start|true|bool (true/false)|Start mtgtooltip on the instance creation.|\n|wrap_in|-|String|Inicial wrap for the tooltip (div, section, whatever you like)|\n|wrap_out|-|String|Final wrap for the tooltip (div, section, whatever you like)|\n|specialImage|-|String|link to use costumized image on request (for the data-specialimage attribute)|\n|mobile|true|bool (true/false)|Don't start the mtgtooltip on mobile/tablet devices.|\n|basiclands|ust|String (ust,unh,ugl)|unstable, unhinged and unglued respectively|\n|shocklands|exp|String (old,new,exp)|old: (dissension,ravnica), new: gatecrash, return to ravnica, exp: expeditions|\n|fetchlands|exp|String (old,new,exp)|old: zendikar, onslaught, new: modern master 3, khans of tarkir, exp: expeditions|\n|painlands|exp|String (old,new,exp)|old: ice age, apocalypse, new: magic origins, exp: tenth edition, sixth edition|\n\nNormal usage:\n\n    \u003cspan class='mtgtooltip'\u003eTarmogoyf\u003c/span\u003e\n\nSet name:\n```\n\u003cspan class='mtgtooltip' data-name=\"Bloodbraid Elf\"\u003ei'm freeeee\u003c/span\u003e\n```\nSet edition:\n```\n\u003cspan class='mtgtooltip' data-set='ZEN'\u003eArid Mesa\u003c/span\u003e\n```\nSet multiverseid:\n```\n\u003cspan class='mtgtooltip' data-multiverseid='4562'\u003eTarmogoyf\u003c/span\u003e\n```\nSpecific image usage\n```\n\u003cspan class='mtgtooltip' data-specialimg=\"myimage.jpg\"\u003eMy altered Baneslayer Angel\u003c/span\u003e\n```\n\n## Quick Start:\n\n```\n\u003cscript src='https://raw.githubusercontent.com/giventofly/MTG-Tooltip-Js/dist/mtgtooltip.js'\u003e\u003c/script\u003e\n```\n\n```\ndocument.addEventListener('DOMContentLoaded', function () {\n        tooltips = new mtgTooltip();\n    });\n\n```\n\n\n## Upgrades? Suggestions?\n\nOpen a issue/pull request or contact me.\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiventofly%2Fmtg-tooltip-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgiventofly%2Fmtg-tooltip-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiventofly%2Fmtg-tooltip-js/lists"}