React-tooltip: Rendering into portals?

[oyeanuj]

Hi @wwayne, is it possible to render the tooltip into a portal (or just to the body element) other than just declaring it at the very top level?

In my case, I use tooltips at a lot of places in the code, but running into special use-cases when using it in elements within contenteditable editors. To make it not editable, ideally I want to render it outside the editable, but then be able to render different tooltip body based on what is being hovered upon within the editable.

Ideally, rendering into a portal would be ideal for such a use-case.

Thoughts?

Thank you!

[oyeanuj]

@wwayne @huumanoid Any thoughts on this?

[madrussa]

It's very simple to create a portal wrapper component to achieve this functionality. I wouldn't see the need to implement this in the react-tooltip library as most people will need fine grain control.

Below is a naive example of how I render react-tooltip into portals. This works fine and the tooltips continue to position correctly over different layered areas.

import React from "react";
import ReactDOM from "react-dom";
import ReactTooltip from "react-tooltip";

// Create root level element for react-tooltips
const domNode = document.createElement('div');
document.body.appendChild(domNode);

// Wrapper component to portal react-tooltips
function BodyPortal ({ children }) {
  return ReactDOM.createPortal(
    children,
    domNode
  );
}

// Custom tooltip wrapper to ensure all tooltips get rendered into the portal
function CustomReactTooltip (props) {
  return (
    <BodyPortal>
      <ReactTooltip
        type="light"
        effect="solid"
        {...props}
      />
    </BodyPortal>
  );
}

export default CustomReactTooltip;

Hopefully those experiencing issues with z-indexing and content editable regions will find this useful.