{"id":19636232,"url":"https://github.com/kuy/redux-tooltip","last_synced_at":"2025-04-07T06:06:02.147Z","repository":{"id":3176652,"uuid":"48536246","full_name":"kuy/redux-tooltip","owner":"kuy","description":"A tooltip React component for Redux.","archived":false,"fork":false,"pushed_at":"2023-03-03T08:04:21.000Z","size":1729,"stargazers_count":130,"open_issues_count":31,"forks_count":31,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-09-21T09:12:29.460Z","etag":null,"topics":["component","maintainer-wanted","react","redux","tooltip"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/kuy.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}},"created_at":"2015-12-24T09:33:12.000Z","updated_at":"2024-01-18T22:45:51.000Z","dependencies_parsed_at":"2023-07-05T21:32:35.044Z","dependency_job_id":null,"html_url":"https://github.com/kuy/redux-tooltip","commit_stats":{"total_commits":190,"total_committers":14,"mean_commits":"13.571428571428571","dds":"0.21578947368421053","last_synced_commit":"9f8419155e0bb5f10adc62c456997cd911deb405"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuy%2Fredux-tooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuy%2Fredux-tooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuy%2Fredux-tooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuy%2Fredux-tooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kuy","download_url":"https://codeload.github.com/kuy/redux-tooltip/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247601447,"owners_count":20964864,"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":["component","maintainer-wanted","react","redux","tooltip"],"created_at":"2024-11-11T12:28:25.409Z","updated_at":"2025-04-07T06:06:02.129Z","avatar_url":"https://github.com/kuy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![NPM Package][npm_img]][npm_site]\n[![Travis][ci_img]][ci_site]\n[![Dependency Status][david_img]][david_site]\n[![Greenkeeper badge][gk_img]][gk_site]\n\n# redux-tooltip\n\nA tooltip [React](https://facebook.github.io/react/) component for [Redux](https://github.com/reactjs/redux).\n\n## Features\n\n+ Designed for use with [Redux](https://github.com/reactjs/redux)\n+ Control by [FSA](https://github.com/acdlite/flux-standard-action)-compliant actions\n+ Don't conceal the state\n+ Auto-resizing and auto-placement based on the content\n+ Support multiple tooltips\n+ Fully customizable 'Delay' feature\n\n## Why?\n\n[react-tooltip](https://github.com/wwayne/react-tooltip) is a popular tooltip library and I tried it with Redux.\nIt works nice at first, but I struggled when I wanted to implement delay/keep features.\nI noticed the root issue is that all tooltip states should be stored in Redux.\nIn addition to this, a tooltip should be controlled by Redux's actions.\n\n## Installation\n\n```\nnpm install --save redux-tooltip\n```\n\n## Demo \u0026 Examples\n\nPlease check out [examples](https://github.com/kuy/redux-tooltip/tree/master/examples) directory.\n\n[Online demo](http://kuy.github.io/redux-tooltip) is also available.\n\n+ [Simple](http://kuy.github.io/redux-tooltip/simple.html)\n+ [Origin](http://kuy.github.io/redux-tooltip/origin.html)\n+ [Place](http://kuy.github.io/redux-tooltip/place.html)\n+ [Delay](http://kuy.github.io/redux-tooltip/delay.html)\n+ [Keep](http://kuy.github.io/redux-tooltip/keep.html)\n+ [Remote](http://kuy.github.io/redux-tooltip/remote.html)\n+ [Content](http://kuy.github.io/redux-tooltip/content.html)\n+ [Multiple](http://kuy.github.io/redux-tooltip/multiple.html)\n+ [Style](http://kuy.github.io/redux-tooltip/style.html)\n\n## Getting Started\n\n`redux-tooltip` provides a Redux reducer and Higher Order components; `Tooltip` and `Origin`.\nThe reducer handles actions that are dispatched from the components and changes Redux's state tree.\nSince both components are already connected to Redux store (this also means they can call `store.dispatch()`),\nthe `Tooltip` component receives changes of props from the store and updates itself.\n\nThe recommended setup is that a single (shared) `Tooltip` component and multiple `Origin` components.\nIf you hover on the origin element, the tooltip will be shown.\n\n#### 1. Put a shared `Tooltip` component to [Container component](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.lek6bm8mf)\n\n```javascript\nimport { Tooltip } from 'redux-tooltip';\n\nclass App extends React.Component {\n  render() {\n    return \u003cdiv\u003e\n      \u003cPage /\u003e\n      \u003cTooltip\u003e\n        Hello Tooltip!\n      \u003c/Tooltip\u003e\n    \u003c/div\u003e;\n  }\n}\n```\n\n#### 2. Wrap your content with an `Origin` component within a Container or Presentational component\n\n```javascript\nimport { Origin } from 'redux-tooltip';\n\nclass Page extends React.Component {\n  render() {\n    return \u003cp\u003e\n      Please hover \u003cOrigin\u003ehere\u003c/Origin\u003e.\n    \u003c/p\u003e;\n  }\n}\n```\n\n#### 3. Combine `redux-tooltip` reducer with yours\n\n```javascript\nimport { reducer as tooltip } from 'redux-tooltip';\n\n// ...\n\nexport default combineReducers(\n  { your, awesome, reducers, ..., tooltip }\n);\n```\n\nThat's it!\n\n#### [Optional] 4. Insert `redux-tooltip` middleware with yours\n\nIf you want to use 'delay' feature, please insert `redux-tooltip` middleware to enable the feature.\n\n```javascript\nimport { middleware as tooltip } from 'redux-tooltip';\n\n// ...\n\nconst store = createStore(\n  reducer,\n  initialstate,\n  applyMiddleware(\n    your, awesome, middlewares, ..., tooltip\n  )\n);\n```\n\n## API\n\n### `\u003cTooltip /\u003e`\n\nA tooltip component. Please wrap a content which should be shown in a tooltip.\n\n+ `name` *(`string`)*: A name of tooltip. This is used by `\u003cOrigin /\u003e` component.\n+ `place` *(`string`|`string[]`)*: A direction of tooltip. This value can be overwritten by `\u003cOrigin /\u003e`'s `place` prop. Default is `top`.\n+ `auto` *(`boolean`)*: A switch to enable/disable the auto-placement feature. Default is `true`.\n+ `within` *(`DOM`)*: A DOM element which is used to restrict the position where this tooltip is placed within.\n+ `onHover` *(`Function`)*: A callback function to be called on mouseover at tooltip.\n+ `onLeave` *(`Function`)*: A callback function to be called on mouseout at tooltip.\n+ `id` *(`string`)*: An `id` attribute passed to `\u003cdiv\u003e` element of a tooltip.\n+ `className` *(`string`)*: A `class` attribute passed to `\u003cdiv\u003e` element of a tooltip.\n+ `darkTheme` *(`boolean`)*: Specify whether dark mode should be used or not\n\n### `\u003cOrigin /\u003e`\n\nAn origin component. Please wrap an element which triggers the action to show a tooltip.\nIn most cases, you may use this component without any options.\nFor advanced usage, you can override the default handlers; `onMouseEnter` and `onMouseLeave`.\n\n+ `name` *(`string`|`string[]`)*: A name(s) to specify which tooltip(s) should be used.\n+ `content` *(`string`|`DOM`|`DOM[]`)*: A content for tooltip. If string, it's sanitized by [DOMPurify](https://github.com/cure53/DOMPurify).\n+ `place` *(`string`|`string[]`)*: A name of direction to specify a location of tooltip.\n+ `tagName` *(`string`)*: A tag name of wrapper element. Default is `span`.\n+ `delay` *(`boolean`|`number`|`string`)*: A number of duration for delay feature.\n+ `delayOn` *(`string`)*: A name of timing to enable the delay. `show`, `hide`, or `both`. Default is `hide`.\n+ `onTimeout` *(`Function`)*: A callback function when timeout by delay feature.\n+ `onHover` *(`Function`)*: An event handler of mouseenter.\n+ `onLeave` *(`Function`)*: An event handler of mouseleave.\n\n#### Origin.wrapBy(*tagName*)\n\n```javascript\n// Invalid SVG...\n// Origin component wraps children with \u003cspan\u003e tag in default.\nfunction Shape() {\n  return \u003csvg width=\"80\" height=\"80\"\u003e\n    \u003cOrigin\u003e\n      \u003crect x=\"10\" y=\"10\" width=\"20\" height=\"30\" /\u003e\n    \u003c/Origin\u003e\n  \u003c/svg\u003e;\n}\n\n// Perfect!\n// Origin.wrapBy() method can be used to create customized Origin component which wraps with your favorite tag.\nconst SVGOrigin = Origin.wrapBy('g');\n\nfunction Shape() {\n  return \u003csvg width=\"80\" height=\"80\"\u003e\n    \u003cSVGOrigin\u003e\n      \u003crect x=\"10\" y=\"10\" width=\"20\" height=\"30\" /\u003e\n    \u003c/SVGOrigin\u003e\n  \u003c/svg\u003e;\n}\n```\n\n### `reducer`\n\nA Redux reducer must be combined with yours.\n\n### `middleware`\n\nPlease apply this middleware if you want to use 'delay' feature.\n\n### `actions`\n\n#### delay(*action*, options = { *duration*: 1500, *callback*: null })\n\nA helper function to enable 'delay' feature.\nInternally, it sets a duration of delay to the [meta](https://github.com/acdlite/flux-standard-action#meta) section of given action.\nIn `options` argument, `duration` is used for duration of delay. `callback` is a callback function which is called after expired delay.\n\n## Development\n\n### Setup\n\n```\nnpm install\nnpm run build\n```\n\n### Start dev server for example\n\n```\nnpm start\n```\n\nOpen `http://localhost:8080/webpack-dev-server/` for auto-reloading.\nIf you want to debug with React Dev Tools, `http://localhost:8080/` will be preferred.\nYou can also view the store, and see the actions being fired, if you have [Redux DevTools extension](https://github.com/zalmoxisus/redux-devtools-extension) installed.\n\n### Run test\n\nThis executes both unit and integration tests:\n\n```\nnpm test\n```\n\n#### Unit test\n\n```\nnpm run test:unit\n```\n\n#### Integration test\n\nWe're currently use PhantomJS 2.1.1 for testing environment.\nFollowing command will launch the headless browser and run test suite.\n\n```\nnpm run test:feature\n```\n\nIf you prefer 'single-run', which means that the browser is closed after testing, try following command:\n\n```\nnpm run test:feature:ci\n```\n\n## Changelog\n\nSee the [Releases](https://github.com/kuy/redux-tooltip/releases) page on GitHub.\n\n## License\n\nMIT\n\n## Author\n\nYuki Kodama / [@kuy](https://twitter.com/kuy)\n\n[npm_img]: https://img.shields.io/npm/v/redux-tooltip.svg\n[npm_site]: https://www.npmjs.org/package/redux-tooltip\n[ci_img]: https://img.shields.io/travis/kuy/redux-tooltip/master.svg?style=flat-square\n[ci_site]: https://travis-ci.org/kuy/redux-tooltip\n[david_img]: https://img.shields.io/david/kuy/redux-tooltip.svg\n[david_site]: https://david-dm.org/kuy/redux-tooltip\n[gk_img]: https://badges.greenkeeper.io/kuy/redux-tooltip.svg\n[gk_site]: https://greenkeeper.io/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuy%2Fredux-tooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkuy%2Fredux-tooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuy%2Fredux-tooltip/lists"}