reactjsoffice-ui-fabricoffice-fabric

Office UI Fabric React - Show tooltip when form input is focused?

This is what I currently have: 

<TooltipHost
  content="Enter claim name in a way to be understandable for all parties."
  directionalHint={DirectionalHint.rightCenter}
  calloutProps={{ calloutMaxWidth: 100}}
>
  <TextField />
</TooltipHost>

The tooltip is shown on hover. I want it to be exclusively shown on focus.
Is there a way to do it without controlling it with state?

Solution

  • The host automatically adds it to hover and focus. If you want focus only you'd need to use the Tooltip control itself and manually show it on focus.