I tried running this code
import * as React from 'react';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { TooltipHost, ITooltipHostStyles } from '@fluentui/react/lib/Tooltip';
import { useId } from '@fluentui/react-hooks';

const calloutProps = { gapSpace: 0 };
// The TooltipHost root uses display: inline by default.
// If that's causing sizing issues or tooltip positioning issues, try overriding to inline-block.
const hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };
const onclick = () => {console.log('isidora');}
export const TooltipBasicExample: React.FunctionComponent = () => {
  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const tooltipId = useId('tooltip');

  return (
    <div>
      <TooltipHost
        content={
          <>
          <DefaultButton onClick={onclick} aria-describedby={tooltipId}>Hover over me</DefaultButton>
          <DefaultButton onClick={onclick} aria-describedby={tooltipId}>Hover over me</DefaultButton>
          </>
          }
        // This id is used on the tooltip itself, not the host
        // (so an element with this id only exists when the tooltip is shown)
        id={tooltipId}
        calloutProps={calloutProps}
        styles={hostStyles}
      >
        <DefaultButton aria-describedby={tooltipId}>Hover over me</DefaultButton>
      </TooltipHost>
    </div>
  );
};

And once I press on the button, I can click on it as much as I want, but as soon as I try to click on another button the tooltip close itself.

I am in a hurry to ship a feature:
Image
which on dislike button has a Tell us more link, which should be clickable after dislike button, and should open a pop up.
I need a fast solution how can I make this possible?