{"id":13492857,"url":"https://github.com/SoorajSNBlaze333/tooltip-sequence","last_synced_at":"2025-03-28T11:31:01.997Z","repository":{"id":57378030,"uuid":"285355709","full_name":"SoorajSNBlaze333/tooltip-sequence","owner":"SoorajSNBlaze333","description":"A simple step by step tooltip helper for any site","archived":false,"fork":false,"pushed_at":"2023-03-27T15:19:25.000Z","size":2609,"stargazers_count":306,"open_issues_count":3,"forks_count":19,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-14T11:57:53.623Z","etag":null,"topics":["description","focus","guide","helper","hint","hover","info","intro","javascript","popover","tooltip","tooltip-sequence","tour","utility","webdev"],"latest_commit_sha":null,"homepage":"https://tooltip-sequence.netlify.app/","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/SoorajSNBlaze333.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}},"created_at":"2020-08-05T17:10:47.000Z","updated_at":"2024-04-14T08:01:41.000Z","dependencies_parsed_at":"2024-01-16T09:11:33.895Z","dependency_job_id":"0b68a4af-8b6b-4d2d-8718-76babf595b12","html_url":"https://github.com/SoorajSNBlaze333/tooltip-sequence","commit_stats":{"total_commits":57,"total_committers":3,"mean_commits":19.0,"dds":"0.10526315789473684","last_synced_commit":"617050b63b4027cc42b1dd0f678ecf85a448b3d0"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SoorajSNBlaze333%2Ftooltip-sequence","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SoorajSNBlaze333%2Ftooltip-sequence/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SoorajSNBlaze333%2Ftooltip-sequence/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SoorajSNBlaze333%2Ftooltip-sequence/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SoorajSNBlaze333","download_url":"https://codeload.github.com/SoorajSNBlaze333/tooltip-sequence/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246020823,"owners_count":20710826,"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":["description","focus","guide","helper","hint","hover","info","intro","javascript","popover","tooltip","tooltip-sequence","tour","utility","webdev"],"created_at":"2024-07-31T19:01:09.919Z","updated_at":"2025-03-28T11:31:01.543Z","avatar_url":"https://github.com/SoorajSNBlaze333.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Tooltip Sequence\nA minimalistic set of tooltips on your app.\n\n\u003cdiv style=\"width: 100%; display: flex; justify-content: center; align-items: center;\"\u003e\n  \u003ca href=\"https://github.com/SoorajSNBlaze333/tooltip-sequence/stargazers\"\u003e\u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/SoorajSNBlaze333/tooltip-sequence\" style=\"margin: 2px\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/SoorajSNBlaze333/tooltip-sequence/network\"\u003e\u003cimg alt=\"GitHub forks\" src=\"https://img.shields.io/github/forks/SoorajSNBlaze333/tooltip-sequence\" style=\"margin: 2px\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/SoorajSNBlaze333/tooltip-sequence/issues\"\u003e\u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/github/issues/SoorajSNBlaze333/tooltip-sequence\" style=\"margin: 2px\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"size\" src=\"https://img.shields.io/badge/size-7kb-brightgreen\" style=\"margin: 2px\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cimg src=\"./docs/static/cover.png\" style=\"width: 100%\" alt=\"cover\"/\u003e\n\n\u003cimg src=\"./docs/static/Demo.gif\" style=\"width: 100%\" alt=\"cover\"/\u003e\n\n## What it does\nSo suppose you create a Web Application and you want to take your users or anyone on a walkthrough on one, two or maybe all the features in your app, you can install this simple Javascript package to create a sequence of small tooltips that will guide the user to each feature( in our case a web element ) and show a small description of what you want them to know about that feature.This package would save you the time to manually create tooltip descriptions on each page and link them together in action.\n\n## Installation\n\n\u003ch3 style=\"font-weight: 100;\"\u003eQuick Usage ⚡️\u003c/h3\u003e\n\u003cdiv style=\"font-size: 12px; font-weight: 200;\"\u003eAdd the following tags to your HTML document\u003c/div\u003e\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/tooltip-sequence@latest/dist/index.css\"\u003e\n\u003cscript src=\"https://unpkg.com/tooltip-sequence@latest/dist/index.min.js\"\u003e\u003c/script\u003e\n```\n\n\u003ch3 style=\"font-weight: 100;\"\u003eOr\u003c/h3\u003e\n\n\u003ch3 style=\"font-weight: 100;\"\u003eUse npm\u003c/h3\u003e\n\n```sh\nnpm install tooltip-sequence --save\n```\n\n\u003cdiv style=\"font-size: 12px; font-weight: 200;\"\u003eAdd the following statements to the file that uses the sequence\u003c/div\u003e\n\n```js\nimport createSequence from \"tooltip-sequence\";\nimport \"tooltip-sequence/dist/index.css\";\n```\n\n## Example\n\n```js\nconst options = {\n  backdropColor:\"transparent || color-code\",\n  sequence:[{\n    element:\"#element\",\n    description:\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",\n    placement:\"top || right || bottom || left\"\n  }],\n  onComplete:function() {\n    // your code\n  }\n};\ncreateSequence(options);\n```\n\u003cdiv style=\"font-weight: 200;\"\u003eInfinite Customizations available. You can customize any element that is created by overriding the classes. Customizations are only limited by the creativity of the designer\u003c/div\u003e\n\n\u003ch2 style=\"margin-top: 10px; font-weight: 200;\"\u003eCheckout the features and a live demo \u003ca href=\"https://tooltip-sequence.netlify.app/\"\u003ehere\u003c/a\u003e\u003c/h2\u003e\n\n## Development\n\nYou need [Hugo](https://gohugo.io/) to run the dev server. If you have [Homebrew](https://brew.sh/) you can do the following:\n\n```sh\nbrew install hugo\n```\n\nCheck this [Hugo installation page](https://gohugo.io/getting-started/installing/) for installing on other systems.\n\nThen clone the repo, install dependencies, and start the server locally.\n\n```sh\ngit clone https://github.com/SoorajSNBlaze333/tooltip-sequence.git\ncd tooltip-sequence\nnpm i\nnpm start\n```\n\nOpen [`http://localhost:1313`](http://localhost:1313) in your browser.\n\n| Scripts              | Description                          |\n| -------------------- | ------------------------------------ |\n| `npm start`          | Starts a local dev server            |\n| `npm run production` | For generating production docs files |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSoorajSNBlaze333%2Ftooltip-sequence","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSoorajSNBlaze333%2Ftooltip-sequence","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSoorajSNBlaze333%2Ftooltip-sequence/lists"}