+
Tooltip
``` +### Styling + +If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css` + 3 . Include react-tooltip component ```jsx diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index 2bd54d5b4..49f706a03 100644 --- a/docs/docs/options.mdx +++ b/docs/docs/options.mdx @@ -66,6 +66,7 @@ import 'react-tooltip/dist/react-tooltip.css' | positionStrategy | string | false | `absolute` | `absolute` `fixed` | the position strategy used for the tooltip. set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container | | delayShow | number | false | | any `number` | tooltip show will be delayed in miliseconds by the amount of value | | delayHide | number | false | | any `number` | tooltip hide will be delayed in miliseconds by the amount of value | +| style | CSSProperties | false | | any React inline style | add styles directly to the component by `style` attribute | | getContent | function | false | | (value: string) => string | a method available to parse, format or modify the given content of tooltip before show it | | isOpen | boolen | false | handled by internal state | `true` `false` | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) | | setIsOpen | function | false | | | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip | diff --git a/docs/docs/upgrade-guide/_category_.json b/docs/docs/upgrade-guide/_category_.json index b34f76e4a..daae91973 100644 --- a/docs/docs/upgrade-guide/_category_.json +++ b/docs/docs/upgrade-guide/_category_.json @@ -2,6 +2,7 @@ "label": "Upgrade Guide", "position": 2, "link": { - "type": "generated-index" + "type": "generated-index", + "description": "Upgrade docs related to migration from V4 to V5" } } diff --git a/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx b/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx index 106f469b1..aa530aab0 100644 --- a/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx +++ b/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx @@ -4,6 +4,8 @@ sidebar_position: 4 # Basic examples V4 -> V5 +Examples of use in V4 -> V5 + import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -78,7 +80,7 @@ import 'react-tooltip/dist/react-tooltip.css'; --- -# Colors +## Colors ### V4 or less - type diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 51c97a803..fc8610c66 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -38,14 +38,14 @@ const config = { sidebarPath: require.resolve('./sidebars.js'), // Please change this to your repo. // Remove this to remove the "edit this page" links. - editUrl: 'https://github.com/ReactTooltip/react-tooltip/tree/v5/docs/', + editUrl: 'https://github.com/ReactTooltip/react-tooltip/tree/master/docs/', }, // blog: { // showReadingTime: true, // // Please change this to your repo. // // Remove this to remove the "edit this page" links. // editUrl: - // 'https://github.com/ReactTooltip/react-tooltip/tree/v5/docs/', + // 'https://github.com/ReactTooltip/react-tooltip/tree/master/docs/', // }, theme: { customCss: require.resolve('./src/css/custom.css'), diff --git a/docs/package.json b/docs/package.json index de90c1441..98b9615c6 100644 --- a/docs/package.json +++ b/docs/package.json @@ -20,6 +20,7 @@ "@mdx-js/react": "^1.6.22", "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", + "raw-loader": "^4.0.2", "react": "18.2.0", "react-dom": "18.2.0", "react-tooltip": "5.0.0" diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 071be2f33..75c8aae3a 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -35,26 +35,23 @@ background-color: rgb(0, 247, 255); } -.example-container .example .example-arrow { - background-color: rgb(0, 247, 255); -} - .example-container .example-orange { color: #222; background-color: rgb(255, 153, 0); } -.example-container .example-orange .example-arrow { - background-color: rgb(255, 153, 0); -} - .example-container .example-pink { color: #fff; background-color: rgb(255, 0, 255); } -.example-container .example-pink .example-arrow { - background-color: rgb(255, 0, 255); +.example-container .example-diff-arrow { + color: #fff; + background-color: rgb(55, 55, 55); +} + +.example-container .example-diff-arrow .example-arrow { + background-color: rgb(222, 34, 72); } .example-container .example-no-radius { diff --git a/docs/static/robots.txt b/docs/static/robots.txt new file mode 100644 index 000000000..8a6c4e1f7 --- /dev/null +++ b/docs/static/robots.txt @@ -0,0 +1,4 @@ +User-agent: * +Allow: / + +Sitemap: https://react-tooltip.com/sitemap.xml diff --git a/docs/yarn.lock b/docs/yarn.lock index 4fdca97ff..76b076c30 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -5954,6 +5954,14 @@ raw-body@2.5.1: iconv-lite "0.4.24" unpipe "1.0.0" +raw-loader@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6" + integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA== + dependencies: + loader-utils "^2.0.0" + schema-utils "^3.0.0" + rc@1.2.8, rc@^1.2.8: version "1.2.8" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" diff --git a/package.json b/package.json index 2f4e5fea3..4b1b8d3e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-tooltip", - "version": "5.0.0", + "version": "5.1.0", "description": "react tooltip component", "scripts": { "dev": "node ./cli.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch", @@ -85,7 +85,7 @@ "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-browsersync": "^1.3.3", "rollup-plugin-copy": "^3.4.0", - "rollup-plugin-dts": "4.2.3", + "rollup-plugin-dts": "^5.0.0", "rollup-plugin-filesize": "^9.1.1", "rollup-plugin-html-scaffold": "^0.2.0", "rollup-plugin-postcss": "^4.0.1", diff --git a/rollup.config.types.js b/rollup.config.types.js index b28ee6400..10dab8dc2 100644 --- a/rollup.config.types.js +++ b/rollup.config.types.js @@ -6,12 +6,16 @@ export default { output: [{ file: 'dist/react-tooltip.d.ts', format: 'es' }], plugins: [ postcss({ - extract: 'react-tooltip-tokens.css', // this will generate a specific file and override on multiples build, but the css will be the same + extract: 'react-tooltip-tokens.css', // this will generate a specific file not being used, but we need this part of code autoModules: true, include: '**/*.css', extensions: ['.css'], plugins: [], }), - dts(), + dts({ + compilerOptions: { + baseUrl: 'src', + }, + }), ], } diff --git a/src/App.tsx b/src/App.tsx index 25c338d41..d155271c1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -40,6 +40,15 @@ function App() { isOpen={isDarkOpen} setIsOpen={setIsDarkOpen} /> +
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 64ba07744..17e1d0061 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -21,6 +21,7 @@ const Tooltip = ({
children = null,
delayShow = 0,
delayHide = 0,
+ style: externalStyles,
// props handled by controller
isHtmlContent = false,
content,
@@ -174,7 +175,7 @@ const Tooltip = ({
[styles['show']]: isOpen || show,
[styles['fixed']]: positionStrategy === 'fixed',
})}
- style={inlineStyles}
+ style={{ ...externalStyles, ...inlineStyles }}
ref={tooltipRef as React.RefObject