{"id":16653336,"url":"https://github.com/mattmoony/peekaboojs","last_synced_at":"2026-04-25T13:35:05.749Z","repository":{"id":105902824,"uuid":"175861338","full_name":"MattMoony/PeekabooJS","owner":"MattMoony","description":"A JavaScript plugin that enables you to display more information without taking up more space. Users simply need to hover over a certain text element to be presented with a stylish message. 🙈","archived":false,"fork":false,"pushed_at":"2019-03-15T17:12:01.000Z","size":339,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-29T12:37:05.609Z","etag":null,"topics":["css","easy","framework","hinting","html","info","information","javascript","js","peekaboo","peekaboojs","popup"],"latest_commit_sha":null,"homepage":"https://mattmoony.github.io/PeekabooJS/example","language":"HTML","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/MattMoony.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2019-03-15T17:08:58.000Z","updated_at":"2023-12-19T12:54:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"4afca65b-b04a-4f69-beba-bf0b30d7bf55","html_url":"https://github.com/MattMoony/PeekabooJS","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/MattMoony/PeekabooJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattMoony%2FPeekabooJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattMoony%2FPeekabooJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattMoony%2FPeekabooJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattMoony%2FPeekabooJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MattMoony","download_url":"https://codeload.github.com/MattMoony/PeekabooJS/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattMoony%2FPeekabooJS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32264429,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T09:15:33.318Z","status":"ssl_error","status_checked_at":"2026-04-25T09:15:31.997Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["css","easy","framework","hinting","html","info","information","javascript","js","peekaboo","peekaboojs","popup"],"created_at":"2024-10-12T09:43:51.388Z","updated_at":"2026-04-25T13:35:05.731Z","avatar_url":"https://github.com/MattMoony.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![GitHub release](https://img.shields.io/github/release/MattMoony/PeekabooJS.svg) ![GitHub last commit](https://img.shields.io/github/last-commit/MattMoony/PeekabooJS.svg) ![GitHub All Releases](https://img.shields.io/github/downloads/MattMoony/PeekabooJS/total.svg) ![GitHub repo size in bytes](https://img.shields.io/github/repo-size/MattMoony/PeekabooJS.svg) ![GitHub](https://img.shields.io/github/license/MattMoony/PeekabooJS.svg)\n\n# PeekabooJS\n_Where's the info? There's the info!_\n\n---\n\nAdd necessary information to your HTML-Elements. Watch the information magically appear in a little info-popup pointing to the element-in-question. It is an interesting way to gain the user's attention and give him additional intel.\n\n## Installation\n\n#### Script tag\n\n```html\n\u003cscript src='https://cdn.jsdelivr.net/gh/MattMoony/PeekabooJS@master/src/peekaboo.js'\u003e\u003c/script\u003e\n```\n\n## Setup\n\nNo additional setup required. All you have to do is include the script in your HTML document.\n\n## Usage\n\n#### Parse all\n\nIn order to have a _peekaboo-popup_ appear, whenever a user hovers over a certain element, you just need to use the `\u003cpab\u003e\u003c/pab\u003e` HTML tag around any text/element.\n\nTo specify the information that will show up, use the `info` attribute.\n\n```html\n\u003c!-- ... --\u003e\n\n\u003cp\u003e\n  Some random text.\n  However, I want you to know \u003cpab info=\"Hello World!\"\u003ethis\u003c/pab\u003e!\n\u003c/p\u003e\n\n\u003c!-- ... --\u003e\n```\n\nNow, just creating the element doesn't create a popup just yet. However, all you need to do now, is, to call the `Peekaboo.parse()` function in your JavaScript code.\n\n```javascript\n// ...\n\nPeekaboo.parse();\n\n// ...\n```\n\n![Example 0](./media/ex0.gif)\n\n#### Parse children\n\nIf you decide to asynchronosly load content into your page, or for any other reason, you might only want to parse certain parts of the webpage. You can do this by just passing the parent element, whose children should be parsed, to the `Peekaboo.parse(parent)` function.\n\n```html\n\u003c!-- ... --\u003e\n\n\u003cdiv\u003e\n  something, something\n\u003c/div\u003e\n\u003cdiv id=\"parent\"\u003e\n  \u003cp\u003e\n    Some random text.\n    However, I want you to\n    know \u003cpab info=\"Hello World!\"\u003ethis\u003c/pab\u003e!\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- ... --\u003e\n```\n\n```javascript\n// ...\n\nPeekaboo.parse(document.getElementById('parent'));\n\n// ...\n```\n\n#### Reposition\n\nIn order for the info-popups to always be in the right position, you should call the `Peekaboo.reposition()` which will re-align all, already created, _peeker_ elements.\n\n```javascript\n// ...\n\nwindow.onresize = () =\u003e {\n  Peekaboo.reposition();\n\n  // ...\n}\n\n// ...\n```\n\n## Conclusion\n\nFor any further questions \u0026 suggestions, you can message me on [twitter](https://twitter.com/Matthia23184857).\n\n---\n\n_... Matthias M. (March, 2019)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattmoony%2Fpeekaboojs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattmoony%2Fpeekaboojs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattmoony%2Fpeekaboojs/lists"}