#How to change mini map tooltip copy?

1 messages · Page 1 of 1 (latest)

sand stag
#

Right now the mini map tooltip says React Flow mini map, how can we change this? I could not find any thing in the docs.

icy ferry
#

No Official way to do it. The title is present in a title tag inside the minimap svg. Maybe you can use javascript to change that

image.png
sand stag
#

Thanks @icy ferry for the confirmation. We can update it another way.

icy ferry
sand stag
#

Potentially something like this

// Update MiniMap tooltip text after it's rendered

  • useEffect(() => {
  •    if (showMiniMap) {

  •        const observer = new MutationObserver(() => {

  •            const miniMapElement = document.querySelector('.react-flow__minimap');

  •            if (miniMapElement && miniMapElement.getAttribute('title') === 'React Flow mini map') {

  •                miniMapElement.setAttribute('title', 'Experiment mini map');

  •            }

  •        });

  •        observer.observe(document.body, {

  •            childList: true,

  •            subtree: true,

  •        });

  •        // Also check immediately in case the element is already there

  •        const miniMapElement = document.querySelector('.react-flow__minimap');

  •        if (miniMapElement && miniMapElement.getAttribute('title') === 'React Flow mini map') {

  •            miniMapElement.setAttribute('title', 'Experiment mini map');

  •        }

  •        return () => observer.disconnect();

  •    }
  • }, [showMiniMap]);
  • useOnViewportChange({ onChange: (viewport: Viewport) => handleUpdateViewport(viewport) });
    const { getNodes } = useReactFlow();

@@ -764,6 +789,7 @@ const FlowDetailView = ({ onBackgroundColorChange }: { onBackgroundColorChange:
nodeStrokeWidth={3}
zoomable
pannable

  •                                ariaLabel="Experiment mini map"