{"id":20803150,"url":"https://github.com/maitrungduc1410/react-native-tooltipster","last_synced_at":"2026-04-21T12:31:04.297Z","repository":{"id":185891439,"uuid":"674295908","full_name":"maitrungduc1410/react-native-tooltipster","owner":"maitrungduc1410","description":"💬 Truely native tooltip for your React Native app 💬","archived":false,"fork":false,"pushed_at":"2023-08-03T16:01:53.000Z","size":9844,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-26T01:27:52.022Z","etag":null,"topics":["react-native","react-native-popover","react-native-tooltip","react-native-tooltipster"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/maitrungduc1410.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-03T15:37:29.000Z","updated_at":"2025-06-06T16:46:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"d69adf6f-8253-4dba-9ca5-26cd3ff90e26","html_url":"https://github.com/maitrungduc1410/react-native-tooltipster","commit_stats":null,"previous_names":["maitrungduc1410/react-native-tooltipster"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/maitrungduc1410/react-native-tooltipster","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-tooltipster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-tooltipster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-tooltipster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-tooltipster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maitrungduc1410","download_url":"https://codeload.github.com/maitrungduc1410/react-native-tooltipster/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-tooltipster/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32091794,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T11:25:29.218Z","status":"ssl_error","status_checked_at":"2026-04-21T11:25:28.499Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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-native","react-native-popover","react-native-tooltip","react-native-tooltipster"],"created_at":"2024-11-17T18:47:23.376Z","updated_at":"2026-04-21T12:31:04.275Z","avatar_url":"https://github.com/maitrungduc1410.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Tooltipster\n\u003cdiv align=\"center\"\u003e\n\u003ch2\u003e💬 Truely native tooltip for your React Native app 💬\u003c/h2\u003e\n\n\u003cimg src=\"images/android.gif\" width=\"300\" /\u003e\n\u003cimg src=\"images/ios.gif\" width=\"300\" /\u003e\n\u003c/div\u003e\n\n## Installation\n\n```sh\nnpm install react-native-tooltipster\n\n# or with yarn\n\nyarn add react-native-tooltipster\n```\n\nNext install CocoaPods deps:\n\n```\nnpx pod-install ios\n```\n\n## Usage\nYou can show tooltip for any component you want\n\n```tsx\nimport Tooltipster from 'react-native-tooltipster';\n\n\u003cTooltipster\n  text=\"Lorem Ipsum ipdoor\"\n  bgColor=\"#ffbd00\"\n\u003e\n  \u003cText\u003eHello world\u003c/Text\u003e\n\u003c/Tooltipster\u003e\n\n// Or\n\n\u003cTooltipster\n  text=\"Lorem Ipsum is simply dummy text of the printing and typesetting industry\"\n  bgColor=\"#ffbd00\"\n\u003e\n  \u003cView\u003e\n    \u003cText\u003eHello world\u003c/Text\u003e\n    \u003cText\u003eIt's a good day\u003c/Text\u003e\n  \u003c/View\u003e\n\u003c/Tooltipster\u003e\n```\n\n# Props\nFirst thing to note is, since this tooltip component renders native view, so sometimes you may need some extra codes to handle platform-specific styles (usually happens if tooltip position is `left or right`).\n\nExample:\n```tsx\n\u003cTooltipster\n  text=\"Normal size arrow\"\n  bgColor=\"#8c2f39\"\n  position=\"left\"\n  arrowPositionRules=\"ALIGN_BUBBLE\"\n  padding={{\n    right: Platform.select({\n      ios: 15,\n      android: undefined\n    })\n  }}\n\u003e\n```\nCheck out [example folder](./example/src/App.tsx) for complete usage\n\n## `animation`\n- Description: tooltip show animation\n- Value: type `SCALE` | `FADE`. Default `SCALE`\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"images/animation.gif\" width=\"300\" /\u003e\n\u003c/div\u003e\n\n## `arrowSize`\n- Description: size of the arrow of tooltip\n- Value: type `number`. Default `10`\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"images/arrowSize.gif\" width=\"300\" /\u003e\n\u003c/div\u003e\n\n## `position`\n- Description: position of the arrow align to the anchor\n- Value: type `top` | `right` | `bottom` | `left`. Default `bottom` on Android, `any` (auto) on iOS\n\n## `arrowPositionRules` (Android only)\n- Description: align arrow by Anchor or bubble (the tooltip itself). This is useful in some cases where `position=left|right`\n- Value: type `ALIGN_BUBBLE` | `ALIGN_ANCHOR`. Default `ALIGN_ANCHOR`\n\n## `text`\n- Description: text of tooltip\n- Value: type `string`. Default `\"\"` (empty string)\n\n## `textAlign`\n- Description: text alignment\n- Value: type `left` | `right` | `center`. Default `center`\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"images/textAlign.gif\" width=\"300\" /\u003e\n\u003c/div\u003e\n\n## `textLineHeight`\n- Description: line height of the text\n- Value: type `number`. Default `undefined`\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"images/textLineHeight.gif\" width=\"300\" /\u003e\n\u003c/div\u003e\n\n## `textColor`\n- Description: text color\n- Value: type `string`. Default `white`\n\n## `fontSize`\n- Description: text font size\n- Value: type `number`. Default `12` on Android, `15` on iOS\n\n## `fontWeight`\n- Description: text font weight\n- Value: type `BOLD` | `BOLD_ITALIC` | `ITALIC` | `NORMAL`. Default `NORMAL`\n\n## `cornerRadius`\n- Description: tooltip border radius \n- Value: type `number`. Default `5`\n\n## `bgColor`\n- Description: tooltip background\n- Value: type `string`. Default `#1c7bf6`\n\n## `maxWidth`\n- Description: tooltip max width\n- Value: type `number`. Default `\u003cSCREEN_WIDTH\u003e`\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"images/maxWidth.gif\" width=\"300\" /\u003e\n\u003c/div\u003e\n\n## `padding`\n- Description: padding of the tooltip\n- Value: type `{top?: number, right?: number, bottom?: number , left?: number}`. Default `{top: 10, right: 10, bottom: 10 , left: 10}`\n\n## `margin`\n- Description: margin of the tooltip\n- Value: type `{top?: number, right?: number, bottom?: number , left?: number}`. Default `{top: 1, right: 1, bottom: 1 , left: 1}`\n\n## `dismissOnClick`\n- Description: dismiss the tooltip if click on itself\n- Value: type `boolean`. Default `false`\n\n## `renderTemplate` (iOS only)\n- Description: React component for the tooltip\n- Value: type `Function`. Default `undefined`\n\nExample:\n```tsx\n\u003cTooltipster\n  bgColor=\"#7A316F\"\n  animation=\"FADE\"\n  renderTemplate={() =\u003e (\n    \u003c\u003e\n      \u003cText\n        style={{ color: 'white', fontSize: 20, textAlign: 'center' }}\n      \u003e\n        With React Component\n      \u003c/Text\u003e\n      \u003cImage\n        source={require('./assets/bunny.jpg')}\n        style={{\n          width: 200,\n          height: 100,\n          resizeMode: 'stretch',\n        }}\n      /\u003e\n    \u003c/\u003e\n  )}\n\u003e\n  \u003cTouchableOpacity\n    style={[styles.button, { backgroundColor: '#7A316F' }]}\n  \u003e\n    \u003cIcon name={'arrowdown'} size={24} color={'white'} /\u003e\n  \u003c/TouchableOpacity\u003e\n\u003c/Tooltipster\u003e\n```\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"images/renderTemplate.png\" width=\"300\" /\u003e\n\u003c/div\u003e\n\n# Events\n- `onClick`: on click bubble (the tooltip)\n- `onDismissed`: on tooltip dismissed\n\n# Examples\n\nCheck out [example folder](./example/src/App.tsx) for complete usage\n\n# Thanks\n- [Android Balloon](https://github.com/skydoves/Balloon)\n- [Swift EasyTipView](https://github.com/teodorpatras/EasyTipView)\n- [React native menu](https://github.com/react-native-menu/menu): for teaching me how to write better Kotlin code","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaitrungduc1410%2Freact-native-tooltipster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaitrungduc1410%2Freact-native-tooltipster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaitrungduc1410%2Freact-native-tooltipster/lists"}