Using tooltip for NavBar items

[maryamyasaei]

Environment Information

• Package version(s): 8.106.7
• Browser and OS versions: (fill this out if relevant)

Describe the issue:

I Want to have tooltip when user click on the Nav items from Nav elements, but Nav elements are Objects, and I cannot wrap them inside tooltip like the example provided in the Doc.

Actual behavior:

Cannot wrap the objects in Nav elements with TooltipHost

Expected behavior:

I want to have tooltip when user click on the items of Nav

If applicable, please provide a codepen repro:

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking)

Products/sites affected: (if applicable)

[miroslavstastny]

Fluent UI v8 allows to customize the rendered tree by passing custom render functions to the components.

There are multiple ways how you can wrap the individual NavItems:

• onRenderLink is used to customize how content inside the link tag is rendered.
• linkAs allows you to render a custom link in place of the normal one. This replaces the entire button rather than simply button content.

See https://developer.microsoft.com/en-us/fluentui#/controls/web/nav#INavProps for more details.

For your use case, you want to custom-render the entire button, so linkAs is the prop to use:

const LinkAs: React.FunctionComponent<INavButtonProps> = (props) => {
  // This example does not set aria attributes for simplification!
  return (
    <TooltipHost content={props.title ?? props.link?.name}>
      <ActionButton {...props} title="" />
    </TooltipHost>
  );
};

export const NavBasicExample: React.FunctionComponent = () => {
  return (
    <Nav
      // other props
      linkAs={LinkAs}
    />
  );
};

Keep in mind this is a minimal example not covering accessibility requirements.

Codesandbox example: https://codesandbox.io/s/v8-nav-linkas-dbqffi?file=/src/App.tsx