{"id":15638854,"url":"https://github.com/anandchowdhary/hovercard","last_synced_at":"2025-08-13T14:34:03.120Z","repository":{"id":33606969,"uuid":"159932857","full_name":"AnandChowdhary/hovercard","owner":"AnandChowdhary","description":"🖱️ Wikipedia summary cards for the web","archived":false,"fork":false,"pushed_at":"2024-06-17T19:27:49.000Z","size":3110,"stargazers_count":89,"open_issues_count":6,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-12T17:16:04.587Z","etag":null,"topics":["a11y","hovercard","javascript","plugin","wikipedia"],"latest_commit_sha":null,"homepage":"https://anandchowdhary.github.io/hovercard/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AnandChowdhary.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-12-01T10:21:05.000Z","updated_at":"2024-04-20T09:51:34.000Z","dependencies_parsed_at":"2024-10-23T04:37:23.846Z","dependency_job_id":null,"html_url":"https://github.com/AnandChowdhary/hovercard","commit_stats":{"total_commits":628,"total_committers":5,"mean_commits":125.6,"dds":0.3200636942675159,"last_synced_commit":"5f2db10ece9f52c98f08f1f283d9212d55e6fa94"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnandChowdhary%2Fhovercard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnandChowdhary%2Fhovercard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnandChowdhary%2Fhovercard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnandChowdhary%2Fhovercard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnandChowdhary","download_url":"https://codeload.github.com/AnandChowdhary/hovercard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229767222,"owners_count":18121045,"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":["a11y","hovercard","javascript","plugin","wikipedia"],"created_at":"2024-10-03T11:23:29.822Z","updated_at":"2024-12-15T00:07:10.267Z","avatar_url":"https://github.com/AnandChowdhary.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![Hovercard](https://raw.githubusercontent.com/AnandChowdhary/hovercard/master/logo.png)\n\nHovercard is a JavaScript library to get Wikipedia summary cards for terms on mouse over. It's useful in explaining concepts or to give summaries to Wikipedia links.\n\n![Travis CI](https://travis-ci.org/AnandChowdhary/hovercard.svg?branch=master)\n[![GitHub](https://img.shields.io/github/license/anandchowdhary/hovercard.svg)](https://github.com/AnandChowdhary/add-to-calendar/blob/master/LICENSE)\n![Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/AnandChowdhary/hovercard.svg)\n[![Made in Enschede](https://img.shields.io/badge/made%20in-Enschede-brightgreen.svg)](https://cityofenschede.com/)\n\n[![NPM](https://nodei.co/npm/hovercard.png)](https://npmjs.com/package/hovercard)\n\n[![Screenshot of a Hovercard demo](https://raw.githubusercontent.com/AnandChowdhary/hovercard/master/demo.png)](https://github.com/AnandChowdhary/hovercard)\n\nYou can get Hovercard from NPM:\n\n```bash\nyarn add hovercard\n```\n\nThen import and initialize it (optionally, set your Wikipedia language):\n\n```js\nimport Hovercard from \"hovercard\";\nconst cards = new Hovercard({\n    lang: \"en\"\n});\n```\n\nAnd add the CSS class \u003ccode\u003ehovercard\u003c/code\u003e on the elements you want hovercards for:\n\n```html\n\u003cspan class=\"hovercard\"\u003eFacebook\u003c/span\u003e\n```\n\n**Important note:** This is the README for Hovercard v2, rewritten with additional configuration in TypeScript. For information about v1, view the [README for Hovercard v1](https://github.com/AnandChowdhary/hovercard/blob/c93fcb1e31feb283f6b7293bba331ebce684f635/README.md).\n\n## Configuration\n\nUse English Wikipedia for the links matching CSS class \"info\":\n\n```js\nnew Hovercard({\n  selector: \"a.info\",\n  wikipediaLanguage: \"en\"\n});\n```\n\nCustom template for the card's contents:\n\n```js\nnew Hovercard({\n  template: result =\u003e `\n    \u003ch1\u003e${result.title}\u003c/h1\u003e\n    \u003cp\u003e${result.text}\u003c/p\u003e\n  `\n});\n```\n\nFetch data from a custom API, disabling cache instead of Wikipedia:\n\n```js\nnew Hovercard({\n  noCache: true,\n  getFetchEndpoint: word =\u003e `https://example.com/dictionary?q=${word}`,\n  fetchConfig: {\n    method: \"POST\"\n  },\n  getHeading: result =\u003e result.title,\n  getBody: result =\u003e result.text\n});\n```\n\nCustom function to fetch data from your API:\n\n```js\nnew Hovercard({\n  getData: word =\u003e new Promise((resolve, reject) =\u003e {\n    fetch(\"my-api\")\n      .then(data =\u003e resolve(data))\n      .catch(error =\u003e reject(error));\n  })\n})\n```\n\nUse a custom storage instead of local storage for caching:\n\n```js\nconst memory = {};\nnew Hovercard({\n  storage: {\n    getItem: key =\u003e memory[key],\n    setItem: (key, value) =\u003e (memory[key] = value)\n  }\n})\n```\n\n## Events\n\nListen to events:\n\n```js\nconst cards = new Hovercard();\ncards.on(\"created\", () =\u003e {\n  console.log(\"Hovercards created!\");\n});\n```\n\nEvents emitted:\n\n- created\n- removed-element\n- show\n- hide\n- update\n\n## [Demo](https://anandchowdhary.github.io/hovercard/)\n\nLiterally made this in a few hours. Lots to be done.\n\n**Todo:**\n- [x] Support all languages, not just English Wikipedia\n- [x] Place cards better (top right, etc., not just bottom left)\n- [x] Keep cards visible on hover, not just link hover\n- [x] Support for cards linking to article/other things\n- [x] Support multiple sources (other than Wikipedia)\n- [ ] Fade cards in and out, don't just display none them\n- [ ] Better loading/error states?\n- [ ] Polyfill for fetch? Docs if none\n- [ ] oEmbed like previews for other services\n- [ ] Auto detect Wikipedia links and hovercard\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanandchowdhary%2Fhovercard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanandchowdhary%2Fhovercard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanandchowdhary%2Fhovercard/lists"}