Tooltip: User defined id for aria-describedBy

[harish-prakash]

Overview
Using the tooltip in SSR (server-side rendering) applications cause an ugly error due to render comparison.

Warning: Prop `aria-describedby` did not match. Server: "evergreen-tooltip-40" Client: "evergreen-tooltip-2"

• Resolves NextJS Warning: Prop aria-describedby did not match. #842

Documentation

• Updated Typescript types and/or component PropTypes
• Added / modified component docs

[netlify]

✅ Deploy Preview for evergreen-storybook ready!

Name	Link
🔨 Latest commit	8e5735e
🔍 Latest deploy log	https://app.netlify.com/sites/evergreen-storybook/deploys/638e30bbf39664000810f657
😎 Deploy Preview	https://deploy-preview-1561--evergreen-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[brandongregoryscott]

I pulled this down and it seems to solve the warning in the original issue (when providing an explicit id). However, I think this is somewhat of a workaround - ideally, the useId hook should be reworked to return stable ids between the client <> server so an explicit id isn't required to suppress this warning during SSR.

I'm cool w/ adding in the ability to set an explicit id for the Tooltip either way, but I think we'll need to add it to TooltipProps in the index.d.ts file for TypeScript users:

evergreen/index.d.ts

Lines 3109 to 3142 in 0c36c45

	export interface TooltipProps {
	/**
	* The appearance of the Tooltip.
	*/
	appearance?: TooltipAppearance
	/**
	* The position the Tooltip is on.
	*/
	position?: PositionTypes
	/**
	* The content of the Tooltip.
	*/
	content: React.ReactNode
	/**
	* Time in ms before hiding the Tooltip.
	*/
	hideDelay?: number
	/**
	* Time in ms before showing the Tooltip.
	*/
	showDelay?: number
	/**
	* Controls whether the Tooltip is shown or not.
	* - When `true`, the component is always shown, regardless of the whether the target is hovered.
	* - When `false`, the component is never shown, regardless of the whether the target is hovered.
	* - When `undefined`, the component is uncontrolled and the isShown state is handled internally
	* (i.e. the Tooltip is shown when the target is hovered)
	*/
	isShown?: boolean
	/**
	* Properties passed through to the Tooltip.
	*/
	statelessProps?: PolymorphicBoxProps<'div', TooltipStatelessProps>
	}

[harish-prakash]

but I think we'll need to add it to TooltipProps in the index.d.ts file for TypeScript users

🤔 I was under the impression that index.d.ts was auto-generated, oh well 🤷‍♂️ more to learn...

ideally, the useId hook should be reworked to return stable ids between the client <> server

not that I intend to do it or particularly in this PR but I am curious, how would you do that? Without a unique reference for this component between the server and client, how would you create a stable id?

[brandongregoryscott]

index.d.ts "should" be generated, but we're still on JS 🥲

Without a unique reference for this component between the server and client, how would you create a stable id?

I'm not entirely sure! I'm not super familiar with SSR myself, but I did some quick searching and it looks like useId is available as a hook directly from React in v18 which solves this: reactwg/react-18#111

Mantine implements a stable id hook by setting the state in an effect:

import React, { useState } from 'react';
import { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';


const randomId = () => `mantine-${Math.random().toString(36).slice(2, 11)}`;


const useReactId: () => string | undefined =
  (React as any)['useId'.toString()] || (() => undefined);


function useClientId() {
  const [uuid, setUuid] = useState('');


  useIsomorphicEffect(() => {
    setUuid(randomId());
  }, []);


  return uuid;
}


function getReactId() {
  const id = useReactId();
  return id ? `mantine-${id.replace(/:/g, '')}` : '';
}


export function useId(staticId?: string) {
  return typeof staticId === 'string' ? staticId : getReactId() || useClientId();
}

[harish-prakash]

Thank you for handling this 🙇‍♂️