{"id":22403325,"url":"https://github.com/springload/react-portal-popover","last_synced_at":"2025-07-31T16:31:53.236Z","repository":{"id":57124065,"uuid":"65641551","full_name":"springload/react-portal-popover","owner":"springload","description":"A popover library for React, using Portals for better positioning. ","archived":false,"fork":false,"pushed_at":"2018-02-19T15:22:53.000Z","size":95,"stargazers_count":21,"open_issues_count":10,"forks_count":6,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-11-10T08:03:49.698Z","etag":null,"topics":["popover","react","react-portal"],"latest_commit_sha":null,"homepage":"https://springload.github.io/react-portal-popover/","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/springload.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-08-13T23:38:59.000Z","updated_at":"2023-06-16T10:02:24.000Z","dependencies_parsed_at":"2022-08-31T05:40:28.916Z","dependency_job_id":null,"html_url":"https://github.com/springload/react-portal-popover","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/springload%2Freact-portal-popover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-portal-popover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-portal-popover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-portal-popover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/springload","download_url":"https://codeload.github.com/springload/react-portal-popover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228267806,"owners_count":17893841,"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":["popover","react","react-portal"],"created_at":"2024-12-05T09:16:48.861Z","updated_at":"2024-12-05T09:16:50.250Z","avatar_url":"https://github.com/springload.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-portal-popover\n[![npm](https://img.shields.io/npm/v/react-portal-popover.svg)](https://www.npmjs.com/package/react-portal-popover) [![Build Status](https://travis-ci.org/springload/react-portal-popover.svg?branch=master)](https://travis-ci.org/springload/react-portal-popover) [![Dependency Status](https://david-dm.org/springload/react-portal-popover.svg)](https://david-dm.org/springload/react-portal-popover) [![devDependency Status](https://david-dm.org/springload/react-portal-popover/dev-status.svg)](https://david-dm.org/springload/react-portal-popover#info=devDependencies) [![Code Climate](https://codeclimate.com/github/springload/react-portal-popover/badges/gpa.svg)](https://codeclimate.com/github/springload/react-portal-popover)\n\nA popover library for React, using [react-portal](https://github.com/tajo/react-portal) for better positioning.\n\n## Installation\n\n```\nnpm install react-portal-popover\n```\n\n## Usage\n\nThere's two steps: import the `OverlayTrigger` that decorates your toggle element,\nthen pass in an `overlay={}` prop with your `ToolTip` that you'd like to display.\n\n```js\nimport React from 'react';\nimport ToolTip, { OverlayTrigger } from 'react-portal-popover';\n\nconst MyComponent = () =\u003e {\n  const options = {\n    size: 7,\n    color: '#999',\n    foregroundColor: '#fff',\n    className: 'my-special-tooltip',\n    useForeground: true,\n  };\n\n  const toolTip = (\n    \u003cToolTip position=\"bottom\" options={options}\u003e\n      \u003cp\u003eMy tooltip content\u003c/p\u003e\n    \u003c/ToolTip\u003e\n  );\n\n  return (\n    \u003cdiv\u003e\n      \u003cOverlayTrigger overlay={toolTip} label=\"Excerpt\" showLabel=\"Show\" hideLabel=\"Hide\"\u003e\n        \u003cbutton\u003eToggle\u003c/button\u003e\n      \u003c/OverlayTrigger\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Configuration options\n\nThere are some options you can pass to the `ToolTip` component to customise how\nit is displayed. This allows you to define multiple styles of tooltip in the same\napplication, and saves writing lots of the CSS boilerplate required for drawing arrows.\n\n```js\nconst options = {\n  classBase: 'tooltip',     // eg .${classBase}--bottom,\n  className: '',            // extra classnames to add to the tooltip element\n  size: 7,                  // the size of the arrow\n  offset: 2,                // how many pixels to offset the arrow by\n  color: '#999',            // border colour of your tooltip\n  foregroundColor: '#fff',  // foreground colour of your tooltip\n  useForeground: true,      // render two arrows, a border and a background.\n  borderWidth: 1,           // pixel width of your border\n};\n\n\u003cToolTip position=\"bottom|top|left|right\" options={options} /\u003e\n```\n\n\n### OverlayTrigger options\n\n`closeOnScroll` determines whether the tooltip closes when you scroll the window.\n\n```\n\u003cOverlayTrigger closeOnScroll={true|false} /\u003e\n```\n\n## Developing\n\n```sh\nnvm install\nnpm install\n```\n\n## Running tests\n\n```js\nnpm test\nnpm run test:watch\nnpm run lint\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringload%2Freact-portal-popover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspringload%2Freact-portal-popover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringload%2Freact-portal-popover/lists"}