{"id":16796630,"url":"https://github.com/ecmadao/rc-tipso","last_synced_at":"2026-04-15T20:02:21.338Z","repository":{"id":112025524,"uuid":"88328818","full_name":"ecmadao/rc-tipso","owner":"ecmadao","description":"A light,  pure js tooltip component for react","archived":false,"fork":false,"pushed_at":"2022-07-12T04:04:04.000Z","size":592,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T03:43:23.473Z","etag":null,"topics":["react","react-components","react-toolbox","tooltip"],"latest_commit_sha":null,"homepage":"https://ecmadao.github.io/rc-tipso","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/ecmadao.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-15T06:30:28.000Z","updated_at":"2019-02-25T22:15:56.000Z","dependencies_parsed_at":"2023-07-11T02:31:54.347Z","dependency_job_id":null,"html_url":"https://github.com/ecmadao/rc-tipso","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/ecmadao/rc-tipso","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmadao%2Frc-tipso","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmadao%2Frc-tipso/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmadao%2Frc-tipso/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmadao%2Frc-tipso/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ecmadao","download_url":"https://codeload.github.com/ecmadao/rc-tipso/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmadao%2Frc-tipso/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267722642,"owners_count":24133969,"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-07-29T02:00:12.549Z","response_time":2574,"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":["react","react-components","react-toolbox","tooltip"],"created_at":"2024-10-13T09:19:40.341Z","updated_at":"2026-04-15T20:02:16.300Z","avatar_url":"https://github.com/ecmadao.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Tipso\n\n[![npm version](https://badge.fury.io/js/rc-tipso.svg)](https://badge.fury.io/js/rc-tipso)  [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![rc-tipso](http://img.shields.io/npm/dm/rc-tipso.svg)](https://www.npmjs.com/package/rc-tipso) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ecmadao/rc-tipso/master/LICENSE)\n\n[![NPM](https://nodei.co/npm/rc-tipso.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/rc-tipso)\n\nA tooltip component for react.\n\n## Screenshot\n\n![rc-tipso](./screenshots/screenshot.png)\n\n## Live demo\n\nClick here: [https://ecmadao.github.io/rc-tipso](https://ecmadao.github.io/rc-tipso)\n\n## Install\n\n```bash\n$ npm i rc-tipso --save\n```\n\n### Build config\n\n- Webpack 3.x config example\n\n```javascript\n// webpack config file\n\n// loaders\nconst postcssLoader = {\n  loader: 'postcss-loader',\n  options: {\n    config: {\n      path: path.join(__dirname, 'postcss.config.js')\n    }\n  }\n};\nconst cssModulesLoader = ExtractTextPlugin.extract({\n  fallback: 'style-loader',\n  use: [\n    {\n      loader: 'css-loader',\n      options: {\n        modules: true,\n        sourceMaps: true,\n        importLoaders: 1,\n        localIdentName: '[name]__[local]___[hash:base64:5]'\n      }\n    },\n    postcssLoader\n  ],\n});\n\nconst webpackConfig = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        include: /rc-tipso/,\n        loaders: cssModulesLoader\n      }\n    ]\n  }\n};\n```\n\n- Webpack 1.x config example\n\n```javascript\n// webpack config file\n\n// css loaders\nconst cssLoaders = [\n  'style-loader',\n  'css-loader?modules\u0026importLoaders=1\u0026localIdentName=[name]__[local]___[hash:base64:5]',\n  'postcss-loader'\n];\n\nconst webpackConfig = {\n  module: {\n    loaders: [\n      {\n        test: /\\.css$/,\n        include: /rc-tipso/,\n        loaders: cssLoaders\n      }\n    ]\n  },\n  postcss: () =\u003e {\n    return [\n      require('postcss-cssnext')\n    ]\n  }\n};\n```\n\n## Usage\n\n```javascript\nimport Tipso from 'rc-tipso';\n\n// ...\n\nrender() {\n  return (\n    \u003cTipso\n      theme=\"dark\"\n      position=\"bottom\"\n      trigger=\"hover\"\n      tipsoContent={(\n        \u003cdiv style={{\n          width: '95px',\n          textAlign: 'center'\n        }}\u003eThis is an example\u003c/div\u003e\n      )}\u003e\n      \u003cdiv\u003ehover to show\u003c/div\u003e\n    \u003c/Tipso\u003e\n  )\n}\n```\n\n## Example\n\nClick [here](./examples/TipsoWrapper.jsx) to see tipso usage examples.\n\n## Api\n\n| name         | type                  | default | description                              |\n| ------------ | --------------------- | ------- | ---------------------------------------- |\n| tipsoContent | react element or node | `null`  | The DOM content you wanna show in tooltip. |\n| theme        | string                | `light` | Tooltip theme, support `light` or `dark` |\n| trigger      | string                | `hover` | The way to active tooltip, you can use `hover`, `click`, `focus` and so on. |\n| wrapperStyle | object                | `{}`    | A style object that change the UI of tooltip container. |\n| wrapperClass | string                | `''`    | Custom className to change the UI of tooltip container. |\n| className    | string                | `''`    | Custom className to change the UI of tooltip |\n| tipsoStyle   | object                | `{}`    | A style object that change the UI of tooltip. |\n| position     | string                | `top`   | Tooltip position. support `top`, `bottom` |\n| show         | bool                  | `false` | Use outside prosp to deside whether show tooltip or not. |\n\n## Dev\n\n```bash\n$ git clone git@github.com:ecmadao/rc-tipso.git\n$ cd rc-tipso\n$ npm i\n$ npm run storybook\n```\n\n## License\n\nReleased under MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecmadao%2Frc-tipso","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecmadao%2Frc-tipso","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecmadao%2Frc-tipso/lists"}