mohsinulhaq/react-popper-tooltip

Feature Request: Expose trigger ref to Tooltip

Undistraction opened this issue · 6 comments

Is your feature request related to a problem? Please describe.
Currently the tooltip has no access to the element that triggered it. This means it cannot adjust its arrow horizontal position (for example) based on the metrics of the triggering element. By knowing the width of the triggering element, the arrow could always be centred on that element, even if the tooltip is displayed using 'bottom-start' for example.

Describe the solution you'd like
Tootip could be passed a ref to the triggering element. If such direct coupling is not wanted, it could be passed a bounds object.

Describe alternatives you've considered
I don't think there is any alternative given the current limitations.

If what you want is access to the trigger component, you can use the getTriggerRef prop on TooltipTrigger. Does this solve your problem?

@mohsinulhaq Unfortunately not, because the component used to render the tooltip has to be passed to TooltipTrigger as a property, so getting access to the ref in its children renderProp is too late. There is no way to pass that ref into the tooltip component.

<TooltipTrigger
    tooltip={TooltipComponent}>
    {({ getTriggerProps, triggerRef }) => {
        // Can't pass triggerRef to TooltipComponent
    }}
</TooltipTrigger>

This would solve it though:

const Tooltip = ({ getTooltipProps, tooltipRef, triggerRef) => {
  // Do whatever calculations needed using triggerRef.current
  return  // Component
}

No, it's not late, instead of passing the Tooltip function directly, you can pass a higher-order function that just passes along the props along with the ref.

Check this:
https://codesandbox.io/s/react-popper-tooltip-example-g4rvf

@mohsinulhaq Ah. Thank you. I thought the ref was managed internally by the library. I didn't realise I could create my own and pass it around.