{"id":18586280,"url":"https://github.com/dbilgili/react-tooltip-controller","last_synced_at":"2025-10-18T13:42:04.355Z","repository":{"id":45372469,"uuid":"160419658","full_name":"dbilgili/React-Tooltip-Controller","owner":"dbilgili","description":"This is a feature-rich React component for controlling tooltips / pop-up menus","archived":false,"fork":false,"pushed_at":"2019-01-22T01:59:25.000Z","size":589,"stargazers_count":26,"open_issues_count":1,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T13:25:08.691Z","etag":null,"topics":["animated-tooltips","reactjs","tooltips"],"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/dbilgili.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":"2018-12-04T21:14:04.000Z","updated_at":"2023-03-16T14:28:07.000Z","dependencies_parsed_at":"2022-07-20T21:18:29.951Z","dependency_job_id":null,"html_url":"https://github.com/dbilgili/React-Tooltip-Controller","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbilgili%2FReact-Tooltip-Controller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbilgili%2FReact-Tooltip-Controller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbilgili%2FReact-Tooltip-Controller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbilgili%2FReact-Tooltip-Controller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dbilgili","download_url":"https://codeload.github.com/dbilgili/React-Tooltip-Controller/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248225709,"owners_count":21068078,"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":["animated-tooltips","reactjs","tooltips"],"created_at":"2024-11-07T00:37:37.245Z","updated_at":"2025-10-18T13:41:59.311Z","avatar_url":"https://github.com/dbilgili.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Tooltip-Controller\n\n This is a feature-rich React component for controlling tooltips. Not only for tooltips, but you can use it for various interaction requirements.\n\n It seamlessly integrates into your markup without breaking it.\n\n Visit the [examples page](https://dbilgili.github.io/React-Tooltip-Controller/) to discover the functionalities.\n\n\n | Basic Tooltip | Animated Tooltip | Advanced Tooltip |\n |---|---|---|\n | ![screen7](https://user-images.githubusercontent.com/22943912/48679619-e6849000-eb92-11e8-99e7-35e147b5fcc1.gif) | ![screen8](https://user-images.githubusercontent.com/22943912/48679620-e6849000-eb92-11e8-8a8b-0499ff333046.gif) | ![screen6](https://user-images.githubusercontent.com/22943912/48679621-e6849000-eb92-11e8-8e9a-a8d709b96f82.gif) |\n\n\n#### Highlights\n- Supports `click`, `hover`, `hover-hold` and `hover-interact` detections.\n- Each tooltip can be animated individually.\n- Set whether the tooltip closes when clicked on it.\n- Close the tooltip manually by assigning a variable.\n- Retrieve the state of the tooltip (whether open or not).\n- Set a timeout to automatically close the tooltip.\n- Position the tooltip relative to the triggering element.\n- Automatically center the tooltip along the X axis for dynamically sized elements.\n\n## Installing\n\n`npm install react-tooltip-controller`\n\nAfter installing the module, import the following components:\n\n```javascript\nimport {ToolTipController, Select} from 'react-tooltip-controller'\n```\n\n## Basic Usage\n\n```html\n\u003cToolTipController\n  detect=\"click\"\n  offsetY=\"center\"\n  offsetY={20}\u003e\n\n  // Selects the element controlling the tooltip\n  \u003cSelect\u003e\n    \u003cbutton\u003eClick me\u003c/button\u003e\n  \u003c/Select\u003e\n\n  // Custom tooltip component\n  \u003cTooltipComponent/\u003e\n\n\u003c/ToolTipController\u003e\n```\n\nAnything, but `\u003cSelect\u003e` component, wrapped by `\u003cToolTipController\u003e` is portalled to the bottom of the `\u003cbody\u003e` tag in the DOM.\n\nYou can either wrap a component or JSX Markup with `\u003cToolTipController\u003e`.\n\nBy wrapping the `\u003cbutton\u003e` with `\u003cSelect\u003e` component, `\u003cTooltipComponent/\u003e` is attached to `\u003cbutton\u003e` and set to be triggered by a `click` event.\n\nBy default, the tooltip wrapped is positioned relative to the left-bottom of the selected element.\n\n## Properties Table\n\n| Props      | Description                                                                                                                                                                | Possible Values                        | Default | Data Type            |\n|------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|---------|-----------------|\n| id         | Assigns an ID number to the tooltip container class to be able to distinguish between multiple tooltips. Required for CSS animations on tooltip                                                                                                | E.g. `\"1\"`, `\"2\"`                          | null    | String          |\n| detect     | Determines how to trigger the tooltip. Note that `timeOut` prop should be defined in order to use the `\"hover-interact”` option                                                                                                                                      | `\"click\"`,\u003cbr/\u003e`\"hover\"`,\u003cbr/\u003e`\"hover-hold\"`,\u003cbr/\u003e`\"hover-interact”`         | `\"click\"` | String          |\n| closeOnClick | Determines whether the tooltip closes when clicked on it                                                                                                                     | `true`, `false`                            | `true`    | Boolean         |\n| triggerClose | A Boolean value of `true` closes the tooltip manually                                                                                                                      | Boolean variable                            |-    | Boolean         |\n| returnState | Returns the state of the tooltip - If it’s open or not | Function | - | Function\n| timeOut    | Determines if the tooltip closes automatically after a certain amount of time in milliseconds                                                                              | positive integers                      | null    | Integer         |\n| offsetX    | Determines the offset along the X axis relative to left bottom of the element                                                                                              | positive/negative integers             | 0       | Integer         |\n| offsetY    | Determines the offset along the Y axis relative to left bottom of the element. If set to `\"center\"`, automatically aligns to middle of the triggering element | positive/negative integers or `\"center\"` | 0       | Integer, String |\n| animation  | Determines the name of the animation class                                                                                                                                 | -                                      | null    | String          |\n| duration   | Determines the duration of the animation in units of milliseconds(ms) or seconds(s)                                                                                     | E.g. `\"500ms\"` or `\"0.5s\"`                 | null    | String          |\n| timing     | Determines the timing function of the animation. You can use standard CSS timing functions such as `\"linear\"`, `\"ease\"` or can define a specific Cubic Bezier curve            | E.g. `\"linear\"` or `\"ease\"`                | null    | String          |\n| properties | Determines the properties to be animated. Can be a string or an array of strings                                                                                                 | E.g. `\"all\"` or `[\"opacity\", \"transform\"]` | [ ]      | String, Array   |\n\n_Note: Hover events act as a click event on touch devices._\n\n## Examples\n\n### Minimal Example\n\n```javascript\nimport React, { Component } from 'react'\nimport {ToolTipController, Select} from 'react-tooltip-controller'\n\nconst ToolTip = () =\u003e\n  \u003cdiv className=\"toolTip\"\u003e\n    Tooltip\n  \u003c/div\u003e\n\nclass Example extends Component {\n\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n\n        \u003cToolTipController\n          detect=\"hover\"\u003e\n\n          \u003cSelect\u003e\n            \u003cbutton\u003eHello There\u003c/button\u003e\n          \u003c/Select\u003e\n\n          \u003cToolTip/\u003e\n\n        \u003c/ToolTipController\u003e\n\n      \u003c/div\u003e\n\n    )\n  }\n}\n\nexport default Example\n\n```\n\n### Animation Example\n\n__Stylus File__\n```css\n.react-tooltip-1\n  opacity: 0\n  transform: translateY(10px)\n  \u0026.fadeIn\n    opacity: 1\n    transform: translateY(0)\n```\n\n__JSX file__\n```javascript\nimport React, { Component } from 'react'\nimport {ToolTipController, Select} from 'react-tooltip-controller'\nimport './styles/animation.css'\n\nconst ToolTip = () =\u003e\n  \u003cdiv className=\"toolTip\"\u003e\n    Tooltip\n  \u003c/div\u003e\n\nclass Example extends Component {\n\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n\n        \u003cToolTipController\n          id=\"1\"\n          detect=\"hover\"\n          animation=\"fadeIn\"\n          duration=\".3s\"\n          timing=\"ease\"\n          properties={[\"opacity\", \"transform\"]}\u003e\n\n          \u003cSelect\u003e\n            \u003cbutton\u003eHello There\u003c/button\u003e\n          \u003c/Select\u003e\n\n          \u003cToolTip/\u003e\n\n        \u003c/ToolTipController\u003e\n\n      \u003c/div\u003e\n\n    )\n  }\n}\n\nexport default Example\n```\n\nNote that `react-tooltip` is a built-in class name and since the `id` prop is set to `\"1\"`, it is referred with the specific class name of `react-tooltip-1`.\n\nAlways set the `id` prop for the animated tooltips in order to prevent any class name conflicts.\n\n__Side note:__ _If you don't set the `properties` prop, all the properties for the tooltip animates. This results in position animations when the browser is resized._\n\n### Use of `triggerClose` prop\n\n```javascript\nimport React, { Component } from 'react'\nimport {ToolTipController, Select} from 'react-tooltip-controller'\n\nconst ToolTip = (props) =\u003e\n  \u003cdiv className=\"toolTip\"\u003e\n    Tooltip\n    \u003cbutton onClick={null}\u003e\u003c/button\u003e\n    \u003cbutton onClick={props.closeTriggerFunction}\u003e\u003c/button\u003e\n  \u003c/div\u003e\n\nclass Example extends Component {\n\n  state = {\n    trigger: false\n  }\n\n  close = () =\u003e {\n    this.setState({trigger: true})\n  }\n\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n\n        \u003cToolTipController\n          detect=\"click\"\n          closeOnClick={false}\n          triggerClose={this.state.trigger}\u003e\n\n          \u003cSelect\u003e\n            \u003cbutton\u003eHello There\u003c/button\u003e\n          \u003c/Select\u003e\n\n          \u003cToolTip closeTriggerFunction={this.close}/\u003e\n\n        \u003c/ToolTipController\u003e\n\n      \u003c/div\u003e\n\n    )\n  }\n}\n\nexport default Example\n```\n\nBy using the `triggerClose` prop, the tooltip can be closed manually. To do so, variable passed to `triggerClose` prop should be set to `true`.\n\nThis example demonstrates how to close the tooltip by setting the state of the triggering variable to `true`. To prevent the other click events on the tooltip from closing it, `closeOnClick` is set to `false`. Note that clicking outside of the tooltip closes it independent of the `triggerClose` prop.\n\n### Use of `returnState` prop\n\n```javascript\nimport React, { Component } from 'react'\nimport {ToolTipController, Select} from 'react-tooltip-controller'\n\nconst ToolTip = (props) =\u003e\n  \u003cdiv className=\"toolTip\"\u003e\n    Tooltip\n  \u003c/div\u003e\n\nclass Example extends Component {\n\n  state = {\n    tooltipState: false\n  }\n\n  getTooltipState = (data) =\u003e {\n    this.setState({tooltipState: data})\n  }\n\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n\n        \u003cToolTipController\n          select=\"btn\"\n          detect=\"hover\"\n          returnState={this.getTooltipState}\u003e\n\n          \u003cSelect\u003e\n            \u003cbutton\u003eHello There\u003c/button\u003e\n          \u003c/Select\u003e\n\n          \u003cToolTip/\u003e\n\n        \u003c/ToolTipController\u003e\n\n      \u003c/div\u003e\n\n    )\n  }\n}\n\nexport default Example\n```\n\nYou can pass a function as a prop through `returnState` in order to get the state of the tooltip, whether it's open or not.\n\n### License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbilgili%2Freact-tooltip-controller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdbilgili%2Freact-tooltip-controller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbilgili%2Freact-tooltip-controller/lists"}