{"id":16758197,"url":"https://github.com/foo123/infopopup","last_synced_at":"2026-03-18T22:02:23.610Z","repository":{"id":54405945,"uuid":"469023007","full_name":"foo123/InfoPopup","owner":"foo123","description":"A simple JavaScript class to show info popups easily for various items and events (Desktop and Mobile)","archived":false,"fork":false,"pushed_at":"2023-03-23T08:15:04.000Z","size":264,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-22T19:48:41.946Z","etag":null,"topics":["popup"],"latest_commit_sha":null,"homepage":"https://foo123.github.io/examples/infopopup/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foo123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-03-12T08:20:17.000Z","updated_at":"2024-01-03T20:25:20.000Z","dependencies_parsed_at":"2025-01-22T19:55:24.080Z","dependency_job_id":null,"html_url":"https://github.com/foo123/InfoPopup","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2FInfoPopup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2FInfoPopup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2FInfoPopup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2FInfoPopup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foo123","download_url":"https://codeload.github.com/foo123/InfoPopup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243838308,"owners_count":20356012,"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":["popup"],"created_at":"2024-10-13T04:04:28.413Z","updated_at":"2026-01-03T00:30:54.915Z","avatar_url":"https://github.com/foo123.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# InfoPopup\n\nA simple JavaScript class to show info popups easily for various combinations of items and events (Desktop and Mobile)\n\n**version 1.0.7** (6 kB minified)\n\n\n[Live Example](https://foo123.github.io/examples/infopopup/)\n\n\n**show title attribute as popup**\n\n```html\n\u003ca href=\"#foo\" title=\"Go to Foo\"\u003eFoo\u003c/a\u003e\n\u003ca href=\"#bar\" title=\"Go to Bar\"\u003eBar\u003c/a\u003e\n```\n\n```javascript\nlet infoPopup = InfoPopup({\n    // custom class for custom styling of popup\n    infoClass: 'title-info',\n    // custom class for custom styling of focused element\n    focusedClass: 'focused',\n    // mouseenter or touchstart on mobile, alternative: trigger = 'click'\n    trigger: 'hover',\n    // elements that have [title] attribute\n    item: '[title]',\n    // get the title content to display\n    content: (item) =\u003e item.getAttribute('title'),\n    // position popup at 'center' of item on X axis\n    // options: 'left', 'right', 'center' (default)\n    atItemX: 'center',\n    // position popup differently on Y axis depending on item\n    // options: 'bottom', 'center', 'top' (default)\n    atItemY: (item) =\u003e item.href === '#bar' ? 'bottom' : 'top',\n    // scroll window X axis for popup to show at specified position if needed\n    scrollXIfNeeded: true /* true|false, default true */,\n    // scroll window Y axis for popup to show at specified position if needed\n    scrollYIfNeeded: true /* true|false, default true */,\n    // show popup after 0.2 sec\n    showDelay: 200,\n    // hide popup after 1 sec\n    hideDelay: 1000,\n    preventDefault: true // prevent default event behavior (default true)\n});\n\n// programmatically show/hide popup\ninfoPopup.show(document.querySelector('[href=\"#foo\"]'));\ninfoPopup.hide();\n```\n\n[![interactive map with InfoPopup](/screenshot.png)](https://foo123.github.io/examples/infopopup/)\n\n\n**see also:**\n\n* [ModelView](https://github.com/foo123/modelview.js) a simple, fast, powerful and flexible MVVM framework for JavaScript\n* [Contemplate](https://github.com/foo123/Contemplate) a fast and versatile isomorphic template engine for PHP, JavaScript, Python\n* [HtmlWidget](https://github.com/foo123/HtmlWidget) html widgets, made as simple as possible, both client and server, both desktop and mobile, can be used as (template) plugins and/or standalone for PHP, JavaScript, Python (can be used as [plugins for Contemplate](https://github.com/foo123/Contemplate/blob/master/src/js/plugins/plugins.txt))\n* [Paginator](https://github.com/foo123/Paginator)  simple and flexible pagination controls generator for PHP, JavaScript, Python\n* [ColorPicker](https://github.com/foo123/ColorPicker) a fully-featured and versatile color picker widget\n* [Pikadaytime](https://github.com/foo123/Pikadaytime) a refreshing JavaScript Datetimepicker that is ightweight, with no dependencies\n* [Timer](https://github.com/foo123/Timer) count down/count up JavaScript widget\n* [InfoPopup](https://github.com/foo123/InfoPopup) a simple JavaScript class to show info popups easily for various items and events (Desktop and Mobile)\n* [Popr2](https://github.com/foo123/Popr2) a small and simple popup menu library\n* [area-select.js](https://github.com/foo123/area-select.js) a simple JavaScript class to select rectangular regions in DOM elements (image, canvas, video, etc..)\n* [area-sortable.js](https://github.com/foo123/area-sortable.js) simple and light-weight JavaScript class for handling smooth drag-and-drop sortable items of an area (Desktop and Mobile)\n* [css-color](https://github.com/foo123/css-color) simple class for manipulating color values and color formats for css, svg, canvas/image\n* [jquery-plugins](https://github.com/foo123/jquery-plugins) a collection of custom jQuery plugins\n* [jquery-ui-widgets](https://github.com/foo123/jquery-ui-widgets) a collection of custom, simple, useful jQueryUI Widgets\n* [touchTouch](https://github.com/foo123/touchTouch) a variation of touchTouch jQuery Optimized Mobile Gallery in pure vanilla JavaScript\n* [Imagik](https://github.com/foo123/Imagik) fully-featured, fully-customisable and extendable Responsive CSS3 Slideshow\n* [Carousel3](https://github.com/foo123/Carousel3) HTML5 Photo Carousel using Three.js\n* [Rubik3](https://github.com/foo123/Rubik3) intuitive 3D Rubik Cube with Three.js\n* [MOD3](https://github.com/foo123/MOD3) JavaScript port of AS3DMod ActionScript 3D Modifier Library\n* [RT](https://github.com/foo123/RT) unified client-side real-time communication for JavaScript using XHR polling / BOSH / WebSockets / WebRTC\n* [AjaxListener.js](https://github.com/foo123/AjaxListener.js): Listen to any AJAX event on page with JavaScript, even by other scripts\n* [asynchronous.js](https://github.com/foo123/asynchronous.js) simple manager for asynchronous, linear, parallel, sequential and interleaved tasks for JavaScript\n* [classy.js](https://github.com/foo123/classy.js) Object-Oriented mini-framework for JavaScript\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo123%2Finfopopup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoo123%2Finfopopup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo123%2Finfopopup/lists"}