{"id":16412384,"url":"https://github.com/jdmdigital/hat-tip","last_synced_at":"2026-06-14T21:32:08.228Z","repository":{"id":202635238,"uuid":"573539387","full_name":"jdmdigital/hat-tip","owner":"jdmdigital","description":"A super-simple, super-light notification bar using jQuery and British humor. ","archived":false,"fork":false,"pushed_at":"2023-10-13T15:57:17.000Z","size":286,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-30T17:43:28.289Z","etag":null,"topics":["jquery","notifications"],"latest_commit_sha":null,"homepage":"https://jdmdigital.co/demo/hat-tip/","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/jdmdigital.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}},"created_at":"2022-12-02T17:54:16.000Z","updated_at":"2023-02-06T19:11:30.000Z","dependencies_parsed_at":"2023-10-20T18:35:44.532Z","dependency_job_id":null,"html_url":"https://github.com/jdmdigital/hat-tip","commit_stats":null,"previous_names":["jdmdigital/hat-tip"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/jdmdigital/hat-tip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdmdigital%2Fhat-tip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdmdigital%2Fhat-tip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdmdigital%2Fhat-tip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdmdigital%2Fhat-tip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdmdigital","download_url":"https://codeload.github.com/jdmdigital/hat-tip/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdmdigital%2Fhat-tip/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34339194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-14T02:00:07.365Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["jquery","notifications"],"created_at":"2024-10-11T06:48:41.486Z","updated_at":"2026-06-14T21:32:08.209Z","avatar_url":"https://github.com/jdmdigital.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hat Tip\nA super-simple, super-light notification bar using jQuery and British humor. \n\n![hattip-screenshot2](https://user-images.githubusercontent.com/12448527/205378576-36e696ed-ad00-4d21-a911-03541851bf24.jpg)\n\n### Live Demo: https://jdmdigital.co/demo/hat-tip/\n\nYou can also learn all about why we created Hat Tip in its [announcement post](https://jdmdig.it/3P4eL2X). \n\n## Unobtrusive Notifications\nIn cases when you don't really want notifications getting in the way of the every day use of your application, Toasts and Modals are literally the opposite.  We wanted a basic banner notification.  We'll be building on this over time, but here's MVP. \n\n## Usage\nSimply include the `hat-tip.js` in your project (or copy the raw code out), add the css you'll find in `hat-tip.css`, and put the following mark-up at the bottom of your page.  Minifed versions of both of those are also included, but their already SUPER-small (the bundle file is only 3kb, uncompressed). \n\n```html\n\u003cdiv id=\"hattip\" data-loud=\"\" role=\"alert\"\u003e\n    \u003cspan id=\"msg\"\u003e\u003c/span\u003e\n    \u003cbutton type=\"button\" aria-label=\"Close\"\u003e\u003cspan aria-hidden=\"true\"\u003e\u0026times;\u003c/span\u003e\u003c/button\u003e\n\u003c/div\u003e\n```\n\nSince v1.1, there is also a \"bundle\" version which does all that for you.  Just include `hat-tip-bundle.js` in your project and it'll add the default CSS and HTML for you.\n\nThen, use the `hattip_fire()` function to update the content of your notification and show it.  The function accepts two arguments: a string containing the message, and a string containing the class or classes you would like added to the notification wrapper. \n\n### Examples\n\nHere's a default example.\n```js\nhattip_fire('Top of the morning to ya!');\n```\nNotifications can be closed using the \"X\" button, or programatically by calling `hattip_die()`.\n\nYou can also update the classes that give the notification color.  Three such colors are included in `hat-tip.css`.\n\n```js\nhattip_fire('Pub is closed? Nightmare!', 'ht-danger');\n```\n\n```js\nhattip_fire('Pub is open! Ideal.', 'ht-success');\n```\n\n```js\nhattip_fire('Pub closes at 10pm.', 'ht-info');\n```\n\nThe second argument can be any class name you wish.  For example, if you were already using Bootstrap, you could call a success alert with:\n```js\nhattip_fire('Bootstrap is everywhere.', 'alert alert-success');\n```\n**NOTE:** You may have to overwrite any additional styles applied from external sources.\n\nYou can also include some basic styling in the message, thusly. \n```js\nhattip_fire('I may be drunk, Miss, but in the morning I will be sober and \u003cb\u003eyou will still be ugly.\u003c/b\u003e');\n```\n\nSince v1.2, you have a third option which makes the notification a little \"louder\" with a bounce-in animation.  Simply add `dont-panic` as the final attribute.  Did you ever see \"[Dad's Army](https://tenor.com/search/dads-army-gifs)?\"\n```js\nhattip_fire('The time has come for us to no longer \u003cb\u003ekeep calm and carry on...\u003c/b\u003e', 'ht-danger', 'dont-panic');\n```\n\nIf a second notification is fired while the first is still on the screen, it'll automatically close, clean-up, and fire the new notification. \n\n## Changlog\n\nv1.0 - Initial Release\n\nv1.1 - Adds Minified Versions as well as a \"Bundle\" option\n\nv1.2 - Don't Panic! (louder animation) added\n\n![adrian-dascal-aQu92J-TrxY-unsplash-small](https://user-images.githubusercontent.com/12448527/205357306-d46b193b-6f9b-41a3-8e4a-b0252fb58089.jpg)\n\nPhoto Credit: Adrian Dascal https://unsplash.com/@dascal on Unspash\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdmdigital%2Fhat-tip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdmdigital%2Fhat-tip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdmdigital%2Fhat-tip/lists"}