{"id":25628408,"url":"https://github.com/siamahnaf/tooltip","last_synced_at":"2026-03-16T17:03:35.939Z","repository":{"id":274657808,"uuid":"923643579","full_name":"siamahnaf/tooltip","owner":"siamahnaf","description":"A highly customizable advanced React tooltip component, offering extensive styling options to fit any design needs. It supports dynamic positioning, and custom triggers for enhanced interactivity. Easily integrate it into your NextJs project.","archived":false,"fork":false,"pushed_at":"2025-06-25T08:36:47.000Z","size":117,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-08T22:25:22.827Z","etag":null,"topics":["next-component","react-component","react-tooltip","siamf-tooltip","tooltip"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@siamf/tooltip","language":"TypeScript","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/siamahnaf.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,"zenodo":null}},"created_at":"2025-01-28T16:05:09.000Z","updated_at":"2025-06-25T08:36:51.000Z","dependencies_parsed_at":"2025-04-16T01:15:13.648Z","dependency_job_id":null,"html_url":"https://github.com/siamahnaf/tooltip","commit_stats":null,"previous_names":["siamahnaf/siamf-tooltip","siamahnaf/tooltip"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/siamahnaf/tooltip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Ftooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Ftooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Ftooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Ftooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siamahnaf","download_url":"https://codeload.github.com/siamahnaf/tooltip/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Ftooltip/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272815815,"owners_count":24997661,"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","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"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":["next-component","react-component","react-tooltip","siamf-tooltip","tooltip"],"created_at":"2025-02-22T18:30:50.740Z","updated_at":"2026-03-16T17:03:35.932Z","avatar_url":"https://github.com/siamahnaf.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/siamahnaf"],"categories":[],"sub_categories":[],"readme":"\u003cbr/\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-white.png\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-black.png\"\u003e\n  \u003cimg alt=\"Siam Ahnaf\" src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-black.png\" height=\"auto\" width=\"240\"\u003e\n\u003c/picture\u003e\n\u003cbr/\u003e \u003cbr/\u003e\n\n# @siamf/tooltip\nA highly customizable advanced React tooltip component, offering extensive styling options to fit any design needs. It supports dynamic positioning, and custom triggers for enhanced interactivity. Easily integrate it into your `NextJs` project.\n\n\u003ca href=\"https://www.buymeacoffee.com/siamahnaf\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n\n- Customizations availability\n- Easy to use\n- Useable directly on `RSC`\n\n# Demo\n\n![image](https://github.com/siamahnaf/siamf-tooltip/blob/main/assets/one.png)\n![image](https://github.com/siamahnaf/siamf-tooltip/blob/main/assets/all.png)\n\n# Installation\n\n```bash\n$ npm i @siamf/tooltip\n```\n\n# Usage\n```javascript\n\u003cTooltip content=\"Hello World I am Using\" variant=\"info\" placement=\"top\"\u003e\n    \u003cbutton className=\"bg-amber-500 py-10 px-4 rounded-lg cursor-pointer text-white\"\u003e\n      Hover Me\n    \u003c/button\u003e\n\u003c/Tooltip\u003e\n```\n\n# Available props\n\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n    \u003cth\u003e Type \u003c/th\u003e\n    \u003cth\u003e Default/Required \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e children \u003c/td\u003e\n    \u003ctd\u003e Child element \u003c/td\u003e\n    \u003ctd\u003e ReactNode | JSX.Element \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e content \u003c/td\u003e\n    \u003ctd\u003e Content to show on tooltip overlay \u003c/td\u003e\n     \u003ctd\u003e string | ReactNode \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e placement \u003c/td\u003e\n    \u003ctd\u003e Tooltip placement \u003c/td\u003e\n    \u003ctd\u003e \"bottom\" | \"left\" | \"right\" | \"top\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\" | \"top-start\" | \"top-end\" \u003c/td\u003e\n    \u003ctd\u003e \"top\" \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e trigger \u003c/td\u003e\n    \u003ctd\u003e Trigger Options \u003c/td\u003e\n    \u003ctd\u003e \"hover\" | \"click\" \u003c/td\u003e\n    \u003ctd\u003e \"hover\" \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e openDefault \u003c/td\u003e\n    \u003ctd\u003e Default open or not \u003c/td\u003e\n    \u003ctd\u003e boolean \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e offset \u003c/td\u003e\n    \u003ctd\u003e Tooltip and button distance \u003c/td\u003e\n     \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e 10 \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e variant \u003c/td\u003e\n    \u003ctd\u003e The interactivity of tooltip style \u003c/td\u003e\n     \u003ctd\u003e \"success\" | \"warning\" | \"error\" | \"info\" \u003c/td\u003e\n    \u003ctd\u003e \"info\" \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e showArrow \u003c/td\u003e\n    \u003ctd\u003e Either show or hide arrow icon \u003c/td\u003e\n     \u003ctd\u003e boolean \u003c/td\u003e\n    \u003ctd\u003e true \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e arrowConfig \u003c/td\u003e\n    \u003ctd\u003e Arrow icon configurations \u003c/td\u003e\n     \u003ctd\u003e ArrowTypes \u003c/td\u003e\n    \u003ctd\u003e  \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e className \u003c/td\u003e\n    \u003ctd\u003e Classname for styling \u003c/td\u003e\n     \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e  \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e styles \u003c/td\u003e\n    \u003ctd\u003e CSSProperties for styling inline \u003c/td\u003e\n     \u003ctd\u003e CSSProperties \u003c/td\u003e\n    \u003ctd\u003e  \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### ArrowTypes\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n    \u003cth\u003e Type \u003c/th\u003e\n    \u003cth\u003e Default/Required \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e width \u003c/td\u003e\n    \u003ctd\u003e Arrow icon width \u003c/td\u003e\n    \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e 14 \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e height \u003c/td\u003e\n    \u003ctd\u003e Arrow icon height \u003c/td\u003e\n     \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e 7 \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e radius \u003c/td\u003e\n    \u003ctd\u003e Arrow icon corner radius \u003c/td\u003e\n    \u003ctd\u003e number(0-15) \u003c/td\u003e\n    \u003ctd\u003e 3 \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e fill \u003c/td\u003e\n    \u003ctd\u003e Arrow icon color \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e  \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Connect with me\n\u003cdiv style=\"display: flex; align-items: center; gap: 3px;\"\u003e\n\u003ca href=\"https://wa.me/8801611994403\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/whatsapp.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003ca href=\"https://siamahnaf.com/\" style=\"margin-right: 8px\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/web.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/in/siamahnaf/\" style=\"margin-right: 8px\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/linkedin.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003ca href=\"https://x.com/siamahnaf198\" style=\"margin-right: 8px\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/x.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.facebook.com/siamahnaf198/\" style=\"margin-right: 8px\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/facebook.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003ca href=\"https://t.me/siamahnaf198\" style=\"margin-right: 8px\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/telegram.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/~siamahnaf\" style=\"margin-right: 8px\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/npm.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiamahnaf%2Ftooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiamahnaf%2Ftooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiamahnaf%2Ftooltip/lists"}