Function TooltipExample

example/src/Examples/TooltipExample.tsx:44–159

({ navigation }: Props)

];

const TooltipExample = ({ navigation }: Props) => {
  const [textAlign, setTextAlign] = React.useState('bold');
  React.useLayoutEffect(() => {
    navigation.setOptions({
      header: () => (
        <Appbar.Header elevated>
          <Tooltip title="Go back">
            <Appbar.BackAction onPress={() => navigation.goBack()} />
          </Tooltip>
          <Appbar.Content title="Tooltips" />
          <Tooltip title="Print ⌘ + P">
            <Appbar.Action icon="printer" onPress={() => {}} />
          </Tooltip>
          <Tooltip title="Search">
            <Appbar.Action icon="magnify" onPress={() => {}} />
          </Tooltip>
          <Tooltip title="More options">
            <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
          </Tooltip>
        </Appbar.Header>
      ),
    });
  });

  return (
    <>
      <ScreenWrapper>
        <Banner visible>
          A tooltip is displayed upon
          {!isWeb
            ? ' tapping and holding a screen element or component'
            : ' hovering over a screen element or component'}
          . Continuously display the tooltip as long as the user long-presses or
          hovers over the element.
        </Banner>
        <List.Section title="Icon Buttons">
          <View style={styles.iconButtonContainer}>
            {formOfTransport.map((transport, index) => (
              <Tooltip
                key={index}
                title={transport.title}
                enterTouchDelay={transport.enterTouchDelay}
                leaveTouchDelay={transport.leaveTouchDelay}
              >
                <IconButton
                  icon={transport.title.split(' ')[0].toLowerCase()}
                  size={24}
                  onPress={() => {}}
                />
              </Tooltip>
            ))}
          </View>
        </List.Section>
        <List.Section title="Toggle Buttons">
          <ToggleButton.Row
            value={textAlign}
            style={styles.toggleButtonRow}
            onValueChange={setTextAlign}