Add a Tooltip to the Avatar in a Persona

[Mark Wu (wfwf1997)]

I want to add a tooltip when users hover over the Avatar in a Persona component for extra information.

Initially, I thought of modifying the avatar slot like this:

<Persona
  name="Kevin Sturgis"
  secondaryText="Available"
  presence={{ status: "available" }}
  size="large"
  avatar={
    <Tooltip content="The BOSS">
      <Avatar {...someProps?}
    </Tooltip>
  }
/>

But I found out it's not feasible because:

1. Putting a customized component into a slot is actually a shorthand of putting it into the children property of the original component. The original Avatar will not be replaced. Also, an Avatar does not accept children.
2. Even if replacement were possible, I can't access the component or its props needed for the Tooltip.

Then I tried to use the underlying hooks, and achieve this with a customized component:

const PersonaWithAvatarTooltip = React.forwardRef(
  function PersonaWithAvatarTooltip(props, ref) {
    const { tooltipText } = props;
    const state = usePersona(props, ref);
    usePersonaStyles(state);

    if (state.avatar && tooltipText) {
      state.avatar = slot.always(
        {
          content: tooltipText,
          children: <state.avatar />,
        },
        { elementType: Tooltip }
      );
    }

    const { presenceOnly, textPosition } = state;

    const coin = presenceOnly
      ? state.presence && <state.presence />
      : state.avatar && <state.avatar />;

    return (
      <state.root>
        {(textPosition === "after" || textPosition === "below") && coin}
        {state.primaryText && <state.primaryText />}
        {state.secondaryText && <state.secondaryText />}
        {state.tertiaryText && <state.tertiaryText />}
        {state.quaternaryText && <state.quaternaryText />}
        {textPosition === "before" && coin}
      </state.root>
    );
  }
);

However, I’m not satisfied with this implementation. It seems overly complex for a simple requirement. The original renderPersona function can’t be reused either because the modified state.avatar fails the assertSlots check. I need to monitor changes in the original implementation and adapt the rendering part as needed. Additionally, the broken-down Persona won't be recognized as the original component by automatic code analysis tools.

I believe this issue is present in many other composite components as well.

Does anyone have a better suggestion for this?

[Ben Howell (behowell)]

Hi Mark Wu (@wfwf1997), in general it's only recommended to add tooltips to items that can be keyboard-focused. Otherwise, the tooltip content is inaccessible to keyboard and touch users. You may want to consider using one of the text slots of the Persona to add extra information instead.

That said, one option to achieve what you're asking is to add a tooltip around the entire Persona, and then have it positioned above the Avatar, as shown in the Tooltip's Target story: https://react.fluentui.dev/?path=/docs/components-tooltip--docs#target

Here's a stackblitz showing that: https://stackblitz.com/edit/b7edwo?file=src%2Fexample.tsx

import * as React from 'react';
import { Persona, Tooltip } from '@fluentui/react-components';

export const PersonaWithTooltipExample = () => {
  const [avatarRef, setAvatarRef] = React.useState<HTMLSpanElement | null>(
    null
  );
  return (
    <Tooltip
      relationship="description"
      content="The BOSS"
      positioning={{ target: avatarRef }}
    >
      <Persona
        name="Kevin Sturgis"
        secondaryText="Available"
        presence={{ status: 'available' }}
        avatar={{
          image: {
            src: 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/persona-male.png',
          },
          ref: setAvatarRef,
        }}
      />
    </Tooltip>
  );
};

[Ben Howell (behowell)]

Another option is to use a render function for the avatar slot. See the documentation for how to do that here: https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--docs#replacing-the-entire-slot

Here's a stackblitz showing that: https://stackblitz.com/edit/b7edwo-fhd4jz?file=src%2Fexample.tsx

import * as React from 'react';
import {
  Persona,
  Tooltip,
  Avatar,
  AvatarProps,
} from '@fluentui/react-components';

export const PersonaWithTooltipExample = () => {
  return (
    <Persona
      name="Kevin Sturgis"
      secondaryText="Available"
      presence={{ status: 'available' }}
      avatar={{
        image: {
          src: 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/persona-male.png',
        },
        children: (AvatarSlot: typeof Avatar, props: AvatarProps) => (
          <Tooltip relationship="description" content="The BOSS">
            <AvatarSlot {...props} />
          </Tooltip>
        ),
      }}
    />
  );
};

[Mark Wu (wfwf1997)]

Thanks! This is the escaping hatch and does work! Previously, I misunderstood this part and thought it was just another normal functional component, not a render function, in the example.

[Mark Wu (wfwf1997)]

One little issue: my TSServer is complaining the type issue for the children if I'm passing a slot render function:

Type '{ image: { src: string; }; children: (AvatarSlot: typeof Avatar, props: AvatarProps) => JSX.Element; }' is not assignable to type 'WithSlotShorthandValue<WithSlotRenderFunction<Omit<ComponentProps<AvatarSlots>, "color"> & { active?: "active" | "inactive" | "unset" | undefined; activeAppearance?: "ring" | "shadow" | "ring-shadow" | undefined; ... 4 more ...; size?: AvatarSize | undefined; } & RefAttributes<...>>> | null | undefined'.
  Types of property 'children' are incompatible.
    Type '(AvatarSlot: typeof Avatar, props: AvatarProps) => JSX.Element' is not assignable to type 'string | number | boolean | ReactPortal | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ... 472 more ... | undefined'.
      Type '(AvatarSlot: typeof Avatar, props: AvatarProps) => JSX.Element' is not assignable to type 'string & SlotRenderFunction<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ...; }>'.
        Type '(AvatarSlot: typeof Avatar, props: AvatarProps) => JSX.Element' is not assignable to type 'string'.ts(2322)

Since the type Slot<T> is using many advanced typing techniques, I can't tell if the type is not well-defined or there's a bug in TSServer. I'm using TypeScript@5.5.4 shipped with VSCode 1.93.1 as the language server.

[Alex Gorbatchev (alexgorbatchev)]

I also encountered the Types of property 'children' are incompatible. error with slot.children and can't figure out how to get around it yet.

[Alex Gorbatchev (alexgorbatchev)]

Playing around with the sandbox posted by Ben Howell (@behowell) , it appears that upgrading react from 17 to 18 causes this problem.

[Alex Gorbatchev (alexgorbatchev)]

This is a known issue:

• [Bug]: slot API is broken on react v18 #29578
• feat(react-components): add react 18 support #34456