{"id":20625351,"url":"https://github.com/mhdfahz/react-tooltip","last_synced_at":"2025-04-15T15:05:30.363Z","repository":{"id":65577992,"uuid":"595013701","full_name":"MHDFahz/react-tooltip","owner":"MHDFahz","description":"A tooltip component that can be positioned relative to its parent element.","archived":false,"fork":false,"pushed_at":"2023-01-30T11:18:43.000Z","size":370,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T15:05:20.074Z","etag":null,"topics":["pure-react","react","react-tooltip","reactjs","tooltip"],"latest_commit_sha":null,"homepage":"","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/MHDFahz.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}},"created_at":"2023-01-30T08:02:09.000Z","updated_at":"2023-06-05T14:34:41.000Z","dependencies_parsed_at":"2023-02-16T06:46:14.809Z","dependency_job_id":null,"html_url":"https://github.com/MHDFahz/react-tooltip","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MHDFahz%2Freact-tooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MHDFahz%2Freact-tooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MHDFahz%2Freact-tooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MHDFahz%2Freact-tooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MHDFahz","download_url":"https://codeload.github.com/MHDFahz/react-tooltip/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249094931,"owners_count":21211837,"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":["pure-react","react","react-tooltip","reactjs","tooltip"],"created_at":"2024-11-16T13:09:22.184Z","updated_at":"2025-04-15T15:05:30.346Z","avatar_url":"https://github.com/MHDFahz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ToolTip-React Component\n\nA tooltip component that can be positioned relative to its parent element.\n\n## Author\n\n[![Author](https://img.shields.io/badge/Author-Fahis-blue)](fahis.skazi@gmail.com)\n\n## Version\n\n[![Version](https://img.shields.io/badge/version-1.0.0-blue)](https://www.agilsium.com/)\n\n## Usage\n\nTo use the ToolTip component, import it into your React component and render it inside the JSX. The following props can be passed to the component:\n\n## Props\n\n- `position`: The position of the tooltip relative to its parent element. Can be set to \"right\", \"left\", \"above\", \"below\" or \"auto.\n- `show`: A flag indicating whether the tooltip should be visible by default.\n- `trigger`: The event that triggers the tooltip to show. Can be set to \"hover\", \"click\" or \"touch\".\n- `content`: The content of the tooltip. It can be a string of text, an image, or a list.\n- `delay`: The delay in milliseconds before the tooltip is shown or hidden.\n- `style`: The style for the tooltip element.\n- `forceCenter`: A flag indicating whether the tooltip should be centered even if it would otherwise be obscured.\n- `autoClose` - A flag indicating whether the tooltip should automatically close after a certain amount of time or not.\n\nHere is an example of how the ToolTip component can be used:\n\n```jsx\nimport ToolTip from \"./ToolTip\";\n\nfunction MyComponent() {\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003eHover over me!\u003c/span\u003e\n      \u003cToolTip\n        position=\"right\"\n        show={true}\n        trigger=\"hover\"\n        content=\"This is a tooltip\"\n        delay={500}\n        forceCenter={false}\n      \u003e\n        \u003cdiv\u003eHi hover\u003c/div\u003e\n      \u003c/ToolTip\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Ref Features\n\nYou can also use the reference that the forwardRef function created to show and hide the tooltip using showDynamicToolTip, killDynamicToolTip and getNode functions.\n\n```jsx\nconst ref = useRef(null);\n\nfunction MyComponent() {\n  return (\n    \u003cdiv\u003e\n      \u003cToolTip\n        position=\"right\"\n        show={true}\n        trigger=\"hover\"\n        content=\"This is a tooltip\"\n        delay={500}\n        ref={ref}\n      \u003e\n        \u003cspan\u003eHover over me!\u003c/span\u003e\n      \u003c/ToolTip\u003e\n      \u003cbutton onClick={() =\u003e ref.current.showDynamicToolTip()}\u003e\n        Show Tooltip\n      \u003c/button\u003e\n      \u003cbutton onClick={() =\u003e ref.current.killDynamicToolTip()}\u003e\n        Hide Tooltip\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n#### Note that the component uses dynamic positioning feature to place the tooltip at the best possible position by analyzing the available space in the window and the position of the parent element.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmhdfahz%2Freact-tooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmhdfahz%2Freact-tooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmhdfahz%2Freact-tooltip/lists"}