Merge branch 'master' into feat/open-on-click

Author: gabrieljablonski

Diff for: docs/docs/examples/render.mdx

@@ -0,0 +1,122 @@
+---
+sidebar_position: 1
+---
+
+# Render
+
+Using the ReactTooltip render prop to render dynamic content based on the active anchor element.
+
+import { Tooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+export const TooltipAnchor = ({ children, id, ...rest }) => {
+  return (
+    <span
+      id={id}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        margin: 'auto',
+        alignItems: 'center',
+        width: '60px',
+        height: '60px',
+        borderRadius: '60px',
+        color: '#222',
+        background: 'rgba(255, 255, 255, 1)',
+        cursor: 'pointer',
+        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
+        border: '1px solid #333',
+      }}
+      {...rest}
+    >
+      {children}
+    </span>
+  )
+}
+
+### Basic usage
+
+The `render` prop can be used to render the tooltip content dynamically based on the currently active anchor element.
+The function signature is as follows:
+
+```ts
+(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
+```
+
+- `content` is available for quick access to the `data-tooltip-content` attribute on the anchor element
+- `activeAnchor` is a ref to the anchor element currently active (or `null` if no element is active)
+- `ChildrenType` is essentially the same as `React.ReactNode`
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a 
+  data-tooltip-id="my-tooltip" 
+  data-tooltip-content="1"
+  data-some-relevant-attr="wow"
+>
+  ◕‿‿◕
+</a>
+<a 
+  data-tooltip-id="my-tooltip" 
+  data-tooltip-content="2"
+  data-some-relevant-attr="so relevant"
+>
+  ◕‿‿◕
+</a>
+<a 
+  data-tooltip-id="my-tooltip" 
+  data-tooltip-content="3"
+  data-some-relevant-attr="much important"
+>
+  ◕‿‿◕
+</a>
+<Tooltip
+  id="my-tooltip"
+  render={({ content, activeAnchor }) => (
+    <span>
+      The element #{content} is currently active.
+      <br/>
+      Relevant attribute: {activeAnchor?.getAttribute('data-some-relevant-attr') || 'not set'}
+    </span>
+  )}
+/>
+```
+
+<div style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}>
+  <TooltipAnchor
+    data-tooltip-id="my-tooltip" 
+    data-tooltip-content="1"
+    data-some-relevant-attr="wow"
+  >
+    ◕‿‿◕
+  </TooltipAnchor>
+  <TooltipAnchor
+    data-tooltip-id="my-tooltip" 
+    data-tooltip-content="2"
+    data-some-relevant-attr="so relevant"
+  >
+    ◕‿‿◕
+  </TooltipAnchor>
+  <TooltipAnchor
+    data-tooltip-id="my-tooltip" 
+    data-tooltip-content="3"
+    data-some-relevant-attr="much important"
+  >
+    ◕‿‿◕
+  </TooltipAnchor>
+  <Tooltip
+    id="my-tooltip"
+    render={({ content, activeAnchor }) => (
+      <span>
+        The element #{content} is currently active.
+        <br/>
+        Relevant attribute:{' '}
+        {
+          activeAnchor?.getAttribute('data-some-relevant-attr') || 'not set'
+        }
+      </span>
+    )}
+  />
+</div>

Diff for: docs/docs/options.mdx

@@ -100,14 +100,15 @@ import 'react-tooltip/dist/react-tooltip.css'
 | `className`        | `string`                   | no        |                           |                                                   | Class name to customize tooltip element                                                                                                                         |
 | `classNameArrow`   | `string`                   | no        |                           |                                                   | Class name to customize tooltip arrow element                                                                                                                   |
 | `content`          | `string`                   | no        |                           |                                                   | Content to de displayed in tooltip (`html` prop is priorized over `content`)                                                                                    |
-| `html`             | `string`                   | no        |                           |                                                   | HTML content to de displayed in tooltip                                                                                                                         |
+| ~~`html`~~         | ~~`string`~~               | ~~no~~    |                           |                                                   | ~~HTML content to de displayed in tooltip~~ <br/>**DEPRECATED**<br/>Use `children` or `render` instead                                                          |
+| `render`           | `function`                 | no        |                           |                                                   | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx)     |
 | `place`            | `string`                   | no        | `top`                     | `top` `right` `bottom` `left`                     | Position relative to the anchor element where the tooltip will be rendered (if possible)                                                                        |
 | `offset`           | `number`                   | no        | `10`                      | any `number`                                      | Space between the tooltip element and anchor element (arrow not included in calculation)                                                                        |
 | `id`               | `string`                   | no        |                           | any `string`                                      | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element                                                                                  |
-| ~~`anchorId`~~     | ~~`string`~~               | ~~no~~    |                           | ~~any `string`~~                                  | ~~The id for the anchor element for the tooltip~~ <br/>**DEPRECATED**<br/>Use `data-tooltip-id` or `anchorSelect` instead                                                            |
-| `anchorSelect`     | CSS selector               | no        |                           | any valid CSS selector                            | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details                                                      |
-| `variant`          | `string`                   | no        | `dark`                    | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets                                                                                                            |
-| `wrapper`          | HTML tag                   | no        | `div`                     | `div` `span` `p` ...                              | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag                                                                           |
+| ~~`anchorId`~~     | ~~`string`~~               | ~~no~~    |                           | ~~any `string`~~                                  | ~~The id for the anchor element for the tooltip~~ <br/>**DEPRECATED**<br/>Use `data-tooltip-id` or `anchorSelect` instead                                       |
+| `anchorSelect`     | CSS selector               | no        |                           | any valid CSS selector                            | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details                                                       |
+| `variant`          | `string`                   | no        | `dark`                    | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets                                                                                                                   |
+| `wrapper`          | HTML tag                   | no        | `div`                     | `div` `span` `p` ...                              | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag                                                                      |
 | `children`         | React node                 | no        | `undefined`               | valid React children                              | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content            |
 | ~~`events`~~       | ~~`string[]`~~             | ~~no~~    | ~~`hover`~~               | ~~`hover` `click`~~                               | ~~Events to watch for when handling the tooltip state~~ <br/>**DEPRECATED**<br/>Use `openOnClick` tooltip prop instead                                                  |
 | `openOnClick`      | `boolean`                  | no        | `false`                   | `true` `false`                                    | Controls whether the tooltip should open when clicking (`true`) or hovering (`false`) the anchor element                                                        |

Diff for: docs/docs/upgrade-guide/changelog-v4-v5.md

@@ -49,6 +49,7 @@ If you run into any problems with the tooltip not updating after changes are mad
 - [x] `setIsOpen` - `function` (to control tooltip state) - if not used, tooltip state will be handled internally
 - [x] `position` - `{ x: number; y: number }` - similar to V4's `overridePosition`
 - [x] `float` - `boolean` - used to achieve V4's `effect="float"`
+- [x] `render` - `function` - can be used to render dynamic content based on the active anchor element (check [the examples](../examples/render.mdx) for more details)
 
 ## `V4` props available in `V5`
 

Diff for: src/components/Tooltip/Tooltip.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState, useRef } from 'react'
 import classNames from 'classnames'
 import debounce from 'utils/debounce'
-import { TooltipContent } from 'components/TooltipContent'
 import { useTooltip } from 'components/TooltipProvider'
 import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect'
 import { computeTooltipPosition } from '../../utils/compute-positions'
@@ -23,7 +22,6 @@ const Tooltip = ({
   positionStrategy = 'absolute',
   middlewares,
   wrapper: WrapperElement,
-  children = null,
   delayShow = 0,
   delayHide = 0,
   float = false,
@@ -36,7 +34,6 @@ const Tooltip = ({
   afterHide,
   // props handled by controller
   content,
-  html,
   isOpen,
   setIsOpen,
   activeAnchor,
@@ -471,7 +468,7 @@ const Tooltip = ({
       }
       setActualPlacement(computedStylesData.place as PlacesType)
     })
-  }, [show, activeAnchor, content, html, place, offset, positionStrategy, position])
+  }, [show, activeAnchor, content, place, offset, positionStrategy, position])
 
   useEffect(() => {
     const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
@@ -514,8 +511,7 @@ const Tooltip = ({
     }
   }, [id, anchorSelect])
 
-  const hasContentOrChildren = Boolean(html || content || children)
-  const canShow = hasContentOrChildren && show && Object.keys(inlineStyles).length > 0
+  const canShow = content && show && Object.keys(inlineStyles).length > 0
 
   return rendered ? (
     <WrapperElement
@@ -536,11 +532,7 @@ const Tooltip = ({
       style={{ ...externalStyles, ...inlineStyles }}
       ref={tooltipRef}
     >
-      {/**
-       * content priority: html > content > children
-       * children should be last so that it can be used as the "default" content
-       */}
-      {(html && <TooltipContent content={html} />) || content || children}
+      {content}
       <WrapperElement
         className={classNames('react-tooltip-arrow', styles['arrow'], classNameArrow, {
           /**

Diff for: src/components/Tooltip/TooltipTypes.d.ts

@@ -39,8 +39,7 @@ export interface IPosition {
 export interface ITooltip {
   className?: string
   classNameArrow?: string
-  content?: string
-  html?: string
+  content?: ChildrenType
   place?: PlacesType
   offset?: number
   id?: string
@@ -52,7 +51,6 @@ export interface ITooltip {
   anchorId?: string
   anchorSelect?: string
   wrapper: WrapperType
-  children?: ChildrenType
   /**
    * @deprecated Use `openOnClick` instead.
    */

Diff for: src/components/TooltipController/TooltipController.tsx

@@ -8,8 +8,10 @@ import type {
   WrapperType,
   DataAttribute,
   ITooltip,
+  ChildrenType,
 } from 'components/Tooltip/TooltipTypes'
 import { useTooltip } from 'components/TooltipProvider'
+import { TooltipContent } from 'components/TooltipContent'
 import type { ITooltipController } from './TooltipControllerTypes'
 
 const TooltipController = ({
@@ -18,6 +20,7 @@ const TooltipController = ({
   anchorSelect,
   content,
   html,
+  render,
   className,
   classNameArrow,
   variant = 'dark',
@@ -197,14 +200,27 @@ const TooltipController = ({
     }
   }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect])
 
+  /**
+   * content priority: children < renderContent or content < html
+   * children should be lower priority so that it can be used as the "default" content
+   */
+  let renderedContent: ChildrenType = children
+  if (render) {
+    renderedContent = render({ content: tooltipContent ?? null, activeAnchor })
+  } else if (tooltipContent) {
+    renderedContent = tooltipContent
+  }
+  if (tooltipHtml) {
+    renderedContent = <TooltipContent content={tooltipHtml} />
+  }
+
   const props: ITooltip = {
     id,
     anchorId,
     anchorSelect,
     className,
     classNameArrow,
-    content: tooltipContent,
-    html: tooltipHtml,
+    content: renderedContent,
     place: tooltipPlace,
     variant: tooltipVariant,
     offset: tooltipOffset,
@@ -229,7 +245,7 @@ const TooltipController = ({
     setActiveAnchor: (anchor: HTMLElement | null) => setActiveAnchor(anchor),
   }
 
-  return children ? <Tooltip {...props}>{children}</Tooltip> : <Tooltip {...props} />
+  return <Tooltip {...props} />
 }
 
 export default TooltipController

Diff for: src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -15,7 +15,11 @@ export interface ITooltipController {
   className?: string
   classNameArrow?: string
   content?: string
+  /**
+   * @deprecated Use `children` or `render` instead
+   */
   html?: string
+  render?: (render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
   place?: PlacesType
   offset?: number
   id?: string