{"id":15011787,"url":"https://github.com/slmgc/react-hint","last_synced_at":"2025-04-13T02:23:24.064Z","repository":{"id":53143983,"uuid":"68534861","full_name":"slmgc/react-hint","owner":"slmgc","description":"Tooltip component for React, Preact, Inferno","archived":false,"fork":false,"pushed_at":"2021-04-04T19:10:04.000Z","size":249,"stargazers_count":335,"open_issues_count":12,"forks_count":28,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-04T04:12:39.963Z","etag":null,"topics":["component","inferno","preact","react","react-component","tooltip"],"latest_commit_sha":null,"homepage":"https://react-hint.js.org/","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/slmgc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-09-18T16:57:59.000Z","updated_at":"2024-01-04T15:47:59.000Z","dependencies_parsed_at":"2022-09-22T19:10:53.748Z","dependency_job_id":null,"html_url":"https://github.com/slmgc/react-hint","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/slmgc%2Freact-hint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slmgc%2Freact-hint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slmgc%2Freact-hint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slmgc%2Freact-hint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slmgc","download_url":"https://codeload.github.com/slmgc/react-hint/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248655012,"owners_count":21140408,"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","inferno","preact","react","react-component","tooltip"],"created_at":"2024-09-24T19:41:42.434Z","updated_at":"2025-04-13T02:23:24.047Z","avatar_url":"https://github.com/slmgc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"React-hint\n==========\n\n[![npm package][npm-badge]][npm] [![npm package][npm-downloads]][npm]\n\n**React-hint** is a small tooltip component for [React](https://github.com/facebook/react) which is developed with simplicity and performance in mind. It also plays nicely with [Preact](https://github.com/developit/preact) and [Inferno](https://github.com/trueadm/inferno).\n\n![react-hint tooltip](https://raw.githubusercontent.com/slmgc/react-hint/master/demo/react-hint.gif)\n![custom tooltip](https://raw.githubusercontent.com/slmgc/react-hint/master/demo/custom-tooltip.png)\n\nHow to install\n--------------\n```\nnpm i -S react-hint\n```\n\nHow to import\n-------------\n\n```jsx\n// React\nimport React from 'react'\nimport ReactHintFactory from 'react-hint'\nconst ReactHint = ReactHintFactory(React)\n\n// Preact\nimport {h, Component, createRef} from 'preact'\nimport ReactHintFactory from 'react-hint'\nconst ReactHint = ReactHintFactory({createElement: h, Component, createRef})\n\n// Inferno\nimport Inferno from 'inferno-compat'\nimport ReactHintFactory from 'react-hint'\nconst ReactHint = ReactHintFactory(Inferno)\n\n// UMD\nconst ReactHint = window.ReactHintFactory(window.React)\n```\n\nYou don't need to include ReactHint in every component which uses tooltips, just include it once in the topmost container component.\n\nUse\n---\n\nReactHint is (in 99% of cases) a singleton-component which is used to render tooltips which appear on multiple elements :\n \n```jsx\n\u003cReactHint autoPosition events /\u003e\n\u003cbutton data-rh=\"tooltip 1\"\u003eHover me 1 !\u003c/button\u003e\n\u003cbutton data-rh=\"tooltip 2\"\u003eHover me 2 !\u003c/button\u003e\n\u003cbutton data-rh=\"tooltip 3\"\u003eHover me 3 !\u003c/button\u003e\n\u003cbutton data-rh=\"tooltip 4\"\u003eHover me 4 !\u003c/button\u003e\n```\n\nThe text content which appears inside the tooltip is set by `data-rh` attribute.\n\nTooltip will appear on hover on every element with `data-rh` attribute.\n\n*Note : tooltip can also be toggled by calling `toggleHint()` on the ref of a the component:*\n \n```jsx\n\u003cReactHint autoPosition events ref={(ref) =\u003e { this.tooltip = ref; }} /\u003e\n\u003cdiv data-rh=\"tooltip\"\u003eElement with tooltip\u003c/div\u003e\n\u003cbutton onClick={() =\u003e { this.tooltip.toggleHint(); }}\u003eClick me to toggle React Hint on element !\u003c/button\u003e\n```\n\n### custom content\n\nIn case you need to define custom content (HTML), you must use the `onRenderContent` prop of ReactHint:\n\n```jsx\n\u003cReactHint\n\tautoPosition\n\tevents\n\tonRenderContent={(target) =\u003e (\u003cdiv\u003e\u003cp\u003e`tooltip ${target.number}`\u003c/p\u003e\u003c/div\u003e)}\n/\u003e\n\u003cbutton data-rh data-number=\"1\"\u003eHover me 1 !\u003c/button\u003e\n\u003cbutton data-rh data-number=\"2\"\u003eHover me 2 !\u003c/button\u003e\n\u003cbutton data-rh data-number=\"3\"\u003eHover me 3 !\u003c/button\u003e\n\u003cbutton data-rh data-number=\"4\"\u003eHover me 4 !\u003c/button\u003e\n```\n\nUse `data-abcdef` attribute on component which uses tooltip to pass data which can be accessed via `target.abcdef` in `onRenderContent()`.\n\n*ReactHint is not your regular wrapping tooltip component library, e.g. this is **incorrect**:*\n\n```jsx\n\u003cReactHint\u003e\n\t\u003cdiv\u003eContent of the tooltip\u003c/div\u003e\n\u003c/ReactHint\u003e\n```\n\n### multiple instances\n\nIn case you need to define multiple instances of `ReactHint` (ex to show tooltips with different content layout), you can customize the attribute name per instance.\nReactHint also supports custom tooltip content with attached event handlers by overriding the content renderer and returning a react node.\n\n```jsx\n\n// default tooltip\n\u003cReactHint autoPosition events /\u003e\n\n// custom tooltip 1\n\u003cReactHint\n\tpersist\n\tattribute=\"data-custom-1\"\n\tevents={{click: true}}\n\tonRenderContent={(target) =\u003e (\u003cdiv\u003e\u003cp\u003e`tooltip ${target.number}`\u003c/p\u003e\u003c/div\u003e)}\n/\u003e\n\n// custom tooltip 2\n\u003cReactHint\n\tpersist\n\tattribute=\"data-custom-2\"\n\tevents={{click: true}}\n\tonRenderContent={(target) =\u003e (\u003ch1\u003e`tooltip ${target.title}`\u003c/h1\u003e)}\n/\u003e\n\n\u003cbutton data-rh=\"default tooltip 1\"\u003eHover me 1 to show default tooltip !\u003c/button\u003e\n\u003cbutton data-rh=\"default tooltip 2\"\u003eHover me 2 to show default tooltip !\u003c/button\u003e\n\n\u003cbutton data-custom-1\tdata-custom-1-number=\"123\"\u003eHover me to show custom tooltip 1 !\u003c/button\u003e\n\u003cbutton data-custom-1\tdata-custom-1-number=\"456\"\u003eHover me to show custom tooltip 1 !\u003c/button\u003e\n\n\u003cbutton data-custom-2\tdata-custom-2-title=\"Hello\"\u003eHover me to show custom tooltip 2 !\u003c/button\u003e\n\u003cbutton data-custom-2\tdata-custom-2-title=\"World\"\u003eHover me to show custom tooltip 2 !\u003c/button\u003e\n```\n\n*Note : when using custom attribute name, data should be passed prefixed with attribute name as shown above.*\n\nOptions\n-------\n\n| ReactHint Property | Type                                                        | Default Value | Description\n| :----------------- | :---------------------------------------------------------- | :------------ | :----------\n| attribute          | String                                                      | \"data-rh\"     | Allows setting a custom tooltip attribute instead of the default one.\n| autoPosition       | Boolean                                                     | false         | Autopositions tooltips based on closeness to window borders.\n| className          | String                                                      | \"react-hint\"  | You can override the tooltip style by passing the `className` property.\n| delay              | Number or {show: Number, hide: Number}                      | 0             | The default delay (in milliseconds) before showing/hiding the tooltip.\n| events             | Boolean or {click: Boolean, focus: Boolean, hover: Boolean} | false         | Enables/disables all events or a subset of events.\n| onRenderContent    | Function                                                    |               | Allows rendering of custom HTML content (with attached event handlers). Pass a function which returns a react node.\n| persist            | Boolean                                                     | false         | Hide the tooltip only on outside click, hover, etc.\n| position           | \"top\", \"left\", \"right\", \"bottom\"                            | \"top\"         | Allows setting the default tooltip placement.\n| ref                | Function                                                    |               | You can pass a function which will get a reference to the tooltip instance.\n\n| DOM Element Attribute | Type                             | Default Value | Description\n| :-------------------- | :------------------------------- | :------------ | :----------\n| data-rh               | String                           |               | Sets the tooltip's text content (if `onRenderContent` is not used to set custom HTML content).\n| data-rh-at            | \"top\", \"left\", \"right\", \"bottom\" | \"top\"         | Allows overriding the default tooltip placement.\n\nFull Example\n------------\n\n```jsx\nimport React from 'react'\nimport {render} from 'react-dom'\nimport ReactHintFactory from 'react-hint'\nimport 'react-hint/css/index.css'\n\nconst ReactHint = ReactHintFactory(React)\nclass App extends React.Component {\n\tonRenderContent = (target, content) =\u003e {\n\t\tconst {catId} = target.dataset\n\t\tconst width = 240\n\t\tconst url = `https://images.pexels.com/photos/${catId}/pexels-photo-${catId}.jpeg?w=${width}`\n\n\t\treturn \u003cdiv className=\"custom-hint__content\"\u003e\n\t\t\t\u003cimg src={url} width={width} /\u003e\n\t\t\t\u003cbutton ref={(ref) =\u003e ref \u0026\u0026 ref.focus()}\n\t\t\t\tonClick={() =\u003e this.instance.toggleHint()}\u003eOk\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t}\n\n\trender() {\n\t\treturn \u003cdiv\u003e\n\t\t\t\u003cReactHint autoPosition events delay={{show: 100, hide: 1000}} /\u003e\n\t\t\t\u003cReactHint persist\n\t\t\t\tattribute=\"data-custom\"\n\t\t\t\tclassName=\"custom-hint\"\n\t\t\t\tevents={{click: true}}\n\t\t\t\tonRenderContent={this.onRenderContent}\n\t\t\t\tref={(ref) =\u003e this.instance = ref} /\u003e\n\n\t\t\t\u003cbutton data-rh=\"Default\"\u003eDefault\u003c/button\u003e\n\t\t\t\u003cbutton data-rh=\"Top\" data-rh-at=\"top\"\u003eTop\u003c/button\u003e\n\t\t\t\u003cbutton data-rh=\"Right\" data-rh-at=\"right\"\u003eRight\u003c/button\u003e\n\t\t\t\u003cbutton data-rh=\"Bottom\" data-rh-at=\"bottom\"\u003eBottom\u003c/button\u003e\n\t\t\t\u003cbutton data-rh=\"Left\" data-rh-at=\"left\"\u003eLeft\u003c/button\u003e\n\n\t\t\t\u003cbutton data-custom\n\t\t\t\tdata-custom-at=\"bottom\"\n\t\t\t\tdata-cat-id=\"10913\"\u003eClick Me\u003c/button\u003e\n\n\t\t\t\u003cbutton data-custom\n\t\t\t\tdata-custom-at=\"bottom\"\n\t\t\t\tdata-cat-id=\"416088\"\u003eClick Me\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t}\n}\n\nrender(\u003cApp /\u003e, demo)\n```\n\nLicense\n-------\nMIT\n\n[npm-badge]: https://img.shields.io/npm/v/react-hint.png\n[npm-downloads]: https://img.shields.io/npm/dm/react-hint.svg\n[npm]: https://www.npmjs.org/package/react-hint\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslmgc%2Freact-hint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslmgc%2Freact-hint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslmgc%2Freact-hint/lists"}